1.简单介绍

  1. Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
  2. vue是一个典型的单页面应用
    1. 只有一个入口页面index.html
    2. 页面中内容全部是由组件来构成
    3. 如果想要实现 a列表组件跳转b详情组件 我们就不能使用传统的a标签来实现 你需要使用vue-router vue路由
  3. 路由可以简单地认为就是之前html里边的a链接

5.组件分为：
普通组件和路由组建
普通组件需要注册
路由组件不需要注册可以直接使用

2.创建路由

  1. 定义路由组件
    1. const child1={
    2. template: `
    3. <div class="child1">child1</div>
    4. `
    5. }
    6. const child2={
    7. template: `
    8. <div class="child2">child2</div>
    9. `
    10. }

  2. 定义路由

    1. const routes=[
    2.  {
    3.    path: '/child1',
    4.    component: child1
    5.  },
    6.  {
    7.    path: '/child2',
    8.    component: child2
    9.  }
    10. ]

    3 创建 router 实例，然后传 routes 配置

    1. const router=new VueRouter({
    2.          // routes: routes    
    3.          routes                //ES6语法 属性名和属性值一致时 可以缩写为一个
    4.      })

    4 创建和挂载根实例

    1. new Vue({
    2.  el: '#app',
    3.  data: {
    5.  },
    6.  router: router
    7. })
    1. <div id="app">
    2.       <!-- 相当于html中a标签 to相当于href属性 -->
    3.       <router-link to="/child1">页面1</router-link>
    4.       <router-link to="/child2">页面2</router-link>
    5.      <!-- 路由匹配到的组件将渲染在这里 -->
    6.     <router-view></router-view>
    7.   </div>

    3.动态路由

    1.动态路由是指把某种模式匹配到的所有路由，全部映射到同一个组件。
    例如有一个user组件，对于所有id各不相同的用户，都需要使用这个组件来渲染，可以使用动态路由

2.使用方法

  1.     const user={
  2.     template:`
  3.     <div>user</div>
  4. `
  5.   const router=new VueRouter({
  6.       routers:[{
  7.       path:'/user/:自定义名字',
  8.     component:user
  9.   }]
  10.   })
  12.   此时/user/foo和/user/bar将映射到相同的路由

3.获取路径参数
$route.params 路由地址/参数值
$route.query 路由地址/？参数名=参数值

4.响应路由参数的变化
当使用路由参数时，原来的组件实例会被复用，因为两个路由都渲染同一个组件，那么组建的生命周期钩子函数不会再被调用，那么复用组件时，可以使用watch监听$route对象的变化来做出响应

  1. const user={
  2.     template:`...`,
  3.   watch:{
  4.     $route(to,from){
  5.         //对路由变化做出响应
  6.     }
  7.   }
  8. }

4.嵌套路由

一个路由组件包含另一个路由组件，即由多层嵌套的组件组合而成

  1. <div id="app">
  2.     <router-view></router-view>        渲染最高级路由匹配到的组件（user）
  3. </div>
  4. <script>
  5. const user={
  6.     template:`
  7.     <div class="user">
  8.         <router-view></router-view>        渲染匹配children中所对应的组件
  9.     </div>
  10. `
  11. }
  12. const child={
  13.     template:`
  14.     <div class="child">child</div>`
  15. }
  17. const router=new VueRouter({
  18.     routes:[
  19.     {
  20.         path:'/user',
  21.       component:user,
  22.       children:[
  23.         {
  24.           path:'child',                地址为user/child时渲染在user组件中
  25.           component:child
  26.         }
  27.       ]
  28.     }
  29.   ]
  30. })
  31. </script>

5.编程式的导航 router.push/router.replace/router.go

一 router.push

1.使用router.push方法可以导航到不同的URL，该方法会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，会回到之前的URL，点击(声明式导航)等同于调用router.push(…)（编程式导航）

2.该方法的参数可以是字符串路径或描述地址的对象

  • router.push(‘home’) 字符串
  • router.push({path:’home’}) 对象
  • router.push({name:’user’,params:{userid:’123’}}) 命名路由 /user/123
  • router.push({path:’register’,query:{plan:’private’}}) 带查询参数 /register?plan=private

注意：若提供path,params会被忽略，此时需提供路由的name或手写完整的带有参数的path

  1. router.push({path:'/user',params:{user}})        这里的params不生效
  3. 正确写法：const userId='123'
  4.                     router.push({name:'user',params:{userId}})            /user/123
  5.                     router.push({path:'/user/${userId}'})                        /user/123

二 router.replace

router.replace 类似于router.push
不同的是，它不会向history添加新纪录，而是替换掉当前的history记录
该方法浏览器不能使用前进和后退操作

三 router.go(n)

该方法参数为整数，可以在history记录中向前或向后退多少步
类似于window.history.go(n)
router.go(1)在浏览器记录中前进一步
router.go(0)刷新页面
router.go(-1)在浏览器记录中后退一步

6.命名路由

1.通过一个名称来标识路由，方便在路由使用的时候快速匹配
2.在创建Router实例时，在routes配置中给路由设置名称

  1. routes:[
  2.   {
  3.       path:'/user/:userId',
  4.     name:'users',
  5.     component:user
  6.   }
  7. ]
  9. <router-link :to="{name:'users',params:{userId:123}}>user</router-link>    
  10. //to属性为对象，链接到另一个路由

7.命名视图

1.给不同的router-view定义不同的名字，通过名字进行对应组件的渲染，它可以实现同时展示多个视图（不是嵌套展示），也就是可以在界面中拥有多个单独命名的视图，若router-view没设置名字，默认为default

  1. <router-view></router-view>    //默认名字 default
  2. <router-view name="a"></router-view>
  3. <router-view name="b"></router-view>
  5. const routes=[{
  6.     path:'/',
  7.   components:{    /一个视图使用一个组件渲染，对于同个路由，多个视图就需要多个组件，因此使用components
  8.     default:Foo,
  9.       a:Bar,
  10.       b:Baz
  11.   }
  12. }]

8.重定向

1.路由重定向就是在输入path路径的时候，重新定义了路由的跳转
2.重定向是通过routes配置中的redirect属性来完成的
3.例如，从路径/a重定向到/b （访问/a url被替换为/b）

  1. routes:[在a的routes中配置
  2.        {path:'/a',redirect:'/b'}
  3. 当路由地址为/a时会强制跳转到/b
  5.     *{path:'/a',redirect:{name:'foo'}}
  6.     *{path:'/a',redirect:to=>{
  7.       return 重定向的字符串路径/路径对象
  8.   }}
  9.        ]

9.别名

1.在url中输入/a或者是/b（为/a的别名），都指向与同一个路由组件来进行渲染
2.别名是通过routes配置中的alias属性来完成的
3.例如 

  1. 路径/a的别名为/b
  3. routes:[{
  4.     path:'/a',alias:'/b',component:A
  5. }]

别名的功能可以自由地将UI结构映射到任意的URL，而不是受限于配置的嵌套路由结构