vue-router - Go语言中文社区

vue-router

  1. vue-router是什么
  2. vue-router有哪几种方法
  3. 怎么使用vue-router

单页面应用： 基于路由和组件在这里插入图片描述

  1. route： 一条路由
  2. routes：一组路由
  3. router： 管理路由
  4. 客户端中的路由： dom元素显示或者隐藏。==》基于hash和基于HTML5 history api

vue-router

实现vue组件之间交互 --》 会被解析为 a href ⇒ 为什么不直接使用a?? 单页面应用，只有主页面一个.html ,a标签无用

实现路由

1. 基于hash实现

原理

监听onhashchange()事件， 仅hash符号之前的内容会被包含在请求中。

路径和组件对应起来，在页面中把组件渲染出来

  1. 页面实现（HTML模板中）
    定义页面中点击 :to =" 去哪”
    显示的地方

  2. js配置路由

    1. 定义route。一条路由两部分组成： path和component
    2. 两条路由，组成routes
      const routes = [
      { path: ‘/home’, component: Home },
      { path: ‘/about’, component: About}
      ]
    3. 对路由进行管理 =》创建路由
      const router = new VueRouter({
      routes
      })

  3. 注入Vue根实例进行使用
    const app = new Vue({
    router
    }).$mount(’#app’)

用户点击 router-link标签时，会去寻找to属性。它的to属性和js中配置的路径（path：’/home’, component: Home） path 对应。找到匹配的组件，最后把组件渲染到标签所在的地方
在这里插入图片描述
在这里插入图片描述

出错点
Non-nested routes must include a leading slash character. Fix the following routes:
非嵌套路由必须包含前导斜杠字符
在这里插入图片描述在这里插入图片描述

动态路由

访问网站并登陆成功， 显示页面+名字 ==》 名字不同。user 是一个组件。不同用户【id不同】 =》同一个user组件中 =》 路由不能写死
vue-router 动态部分： 以：开头

route： {
	path：“user/:id”,
	component: user
}

步骤

  1. 创建user.vue 组件
  2. router中的index.js 引入 user 组件并进行使用
    在这里插入图片描述
  3. App.vue中与路由建立连接
    在这里插入图片描述

原理

  1. 整个vue-router注入到根实例
  2. 组件内部，通过this.$route来获取到router实例
  3. params属性获得动态部分。

动态路由来回切换，组件不发生变化，只能使用watch来监听$route的变化
在这里插入图片描述
==嵌套路由 ===》 childrens
在这里插入图片描述在这里插入图片描述
编程式导航

2. h5的history实现

从图可以看出，通过hash方式进行路由会有一个丑陋的 # 。因此就有了基于history的方法实现
在这里插入图片描述

1. history实现方法

声明是history模式

    • mode：‘history’
      匹配不到任何资源的时候，要返回一个页面【Error.vue】 避免返回404错误页面
  2. {path： ‘*’， component：Error}
    在这里插入图片描述
    没有啦！！开心
    在这里插入图片描述

2. history实现原理

  1. 浏览器点击后退按钮或js调用history.back => 触发onpopstate事件
  2. pushState 往history对象里添加一个新的历史记录
  3. replaceState是替换history对象中的当前历史

缺陷： 直接访问二级页面或在页面刷新，会出现404 错误 ==》 重定向

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/Ada_lake/article/details/102650373
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！