vue Router 路由

• 1- 简介

• Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

• 2- 原理

  • hash （默认） 单页面程序 每次切换页面是 修改都是#后面的内容
  • history 历史记录 back forward go

• 注意：路由模块来实现页面跳转的方式

  • 1- 直接修改地址栏
  • 2- router-link
  • 3- $router.push()

• 3- 配置路由器

  • 1):下载 npm i vue-router -S
  • 2):在main.js中引入 import VueRouter from 'vue-router';
  • 3):使用vue-router: Vue.use(VueRouter);
  • 4):创建路由对象并配置路由规则
    • 5):将其路由对象传递给Vue的实例，options中加入router:router
    • 6):在app.vue中展示内容 <router-view></router-view>

  let router = new VueRouter({ routes:[{path:'/home',component:Home}] });

• 4- 配置路由

  let routes = [ { path:'/', name:'layout', redirect:{name:'index'}, component:'layout', children:[ { path:'/index', name:'index', component:()=>import('../../views/index/index.vue') }, { name:'shop_goods_list' path:'/shop/goods/list', component:'shop/goods/list' } ] }, { path:'/login', name:'login', component:()=>import('../../views/login/index.vue') }, { path:'*', redirect:{name:'index'}, } ]

• 5- 路由传参两种方式

  • 1- 声明式
    • <router-link></router-link>
    • <router-view></router-view>
  • 2- 编程式
    • this.$router.push()

• 6- $router 与 $route 的区别

  • $route: 路由信息对象path、params、hash、query、matched、name
  • 1） $route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 "/order"。
  • 2） $route.params一个 key/value 对象，包含了动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
  • 3） $route.query一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有 $route.query.user为1， 如果没有查询参数，则是个空对象。
  • 4） $route.hash当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
  • 5） $route.fullPath完成解析后的 URL，包含查询参数和 hash 的完整路径。
  • 6） $route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  • 7） $route.name 当前路径名字,$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等
  • 1. $router.push和$router.replace的区别：
    • 1）使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
    • 2）使用replace方法不会向 history添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面