vue-router 路由基础简单介绍

今天我总结了一下vue-route基础，vue官方推荐的路由。

一、起步

HTML

<div id="myDiv">
  <h1>简单路由</h1>
  <router-link to="/foo">Go to foo</router-link>    
  <router-link to="/bar">Go to bar</router-link>    

// 渲染出口
  <router-view></router-view>
</div> 

1. 创建模板（组件）：
   (也可以用import 引入外部组件)

   var foo={template:"<p>我是foo 组件</p>"};
   var bar={template:"<p>我是bar 组件</p>"};

1. 组件注入路由：

var routes = [
      {path:'/foo',component:foo},
      {path:'/bar',component:b ar},
   ];

1. 创建路由实例：

// 这里还可以传入其他配置
const router = new VueRouter({
      routes     // （缩写）相当于 routes: routes; 
    });

注意这里 routes 没有 ‘ r ’ (不要写成 routers)

1. 创建vue实例（并挂载实例）

   var routerVue = new Vue({
      router
   }).$mount("#myDiv"); 

二、动态路由匹配

有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。
动态路由主要用到了全局 $route.params 和路由的动态参数，全局route 的 params API 存储着 路由的所有参数，路径的参数用 “ ： ”来标记：

HTML

<div id="myDiv">
// 点击对应链接时传入对应参数foo 和 bar
  <router-link to="/User/:foo">Go to foo</router-link> 
  <router-link to="/User/:bar">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS

const User = {
      template:'<p>我的ID是{{ $route.params.id }}</p>',
// 在路由切换时可以观察路由
      watch:{
        '$route'(to,form){
          console.log(to);  //要到达的
          console.log(form);
        }
      }
    }

    const router = new VueRouter({
      routes:[
         {path:'/user/:id',component:User}  // 标记动态参数 id
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

三、嵌套路由

1.嵌套路由讲的是我们可以在 <router-view>中去在渲染 <router-view> 这时要在配置路由时使用 children
例如：
HTML：

<div id="myDiv">
  <router-link to="/User/:foo">Go to foo</router-link> 
  <router-link to="/User/:bar">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS：

 const User = {
      template:'<div><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></div>',
     }

     // 子路由
     const userChildOne = {
        template:'<div>我是 userChildOne</div>'
     }
     const userChildTwo = {
        template:'<div>我是 userChildTwo</div>'
     }
    const router = new VueRouter({
      routes:[
         {path:'/user/:id',component:User,
           children:[  // 用法和参数和routes 一样
              {path:"/user/childone",component:userChildOne},
              {path:"/user/childtwo",component:userChildTwo}
           ]

         }
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

四、命名路由

1.给路由命名指定路路由跳转，要用到参数name 和 v-bind

HTML:

<div id="myDiv">
<!-- 要用v-bind 的绑定to -->
  <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
  <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS:

  const User = {
      template:'<p>我的ID是{{ $route.params.userId }}</p>',
      watch:{
        '$route'(to,form){
          console.log(to);
          console.log(form);
        }
      }
    }

    const router = new VueRouter({
      routes:[
      // name 一一对应上
         {path:'/user/:userId',name:"userOne",component:User},
         {path:'/user/:userId',name:"userTwo",component:User}
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

五、命名视图

1.给渲染视图 router-view 命名，来制定让那个视图渲染组件
HTML:

<div id="myDiv">
<!-- 要用v-bind 的绑定to -->
  <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
  <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>  
<!-- 视图命名 如果不写name 则为默认为 default-->
   <router-view></router-view>
   <router-view name='b'></router-view>
</div> 

JS：

// 四个模板
    const UserA = {
      template:'<p>我是one,ID是{{ $route.params.userId }}</p>',
    }
    const UserB = {
      template:'<p>我是two,ID是{{ $route.params.userId }}</p>',
    }
    const UserC = {
      template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>',
    }
    const UserD = {
      template:'<p>我是four,ID是{{ $route.params.userId }}</p>',
    }
    const router = new VueRouter({
      routes:[
      // name 一一对应上
         { 
            path:'/user/:userId',
            name:"userOne",
            components:{ // 注意这里为components 多个“ s ”
               default:UserA,
               b:UserB
            }
         },
         { 
            path:'/user/:userId',
            name:"userTwo",
            components:{
               default:UserD,
               b:UserC
            }
        }
      ]
    });

    var myVue = new Vue({
        router
    }).$mount("#myDiv")

六、重定向 和 别名

重定向 和别名，首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，

『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

重定向主要用参数：redirect 而别名主要用到参数： alias
HTML:

<div id="myDiv">
 <h2>效果查看地址栏最后面的变化</h2>
  <router-link to="/User/foo">Go to foo</router-link> 
  <router-link to="/User/bar">Go to bar</router-link>  
  <router-link to="/User/Car">Go to bar</router-link>  

   <router-view></router-view>
</div> 

JS:

    const User = {
      template:'<p>我是同一个页面</p>',
    }
    const router = new VueRouter({
      mode:"history",
      routes:[
         { path:'/User/foo',component:User},
         { path:'/User/bar',redirect: '/User/foo',component:User},
         // 重定向的目标也可以是一个命名的路由：
         // 甚至是一个方法，动态返回重定向目标：

         // 别名设置
         { path:'/User/foo',alias: '/User/Car'}

      ]
    });

    var myVue = new Vue({ 
        router
    }).$mount("#myDiv")