一：
vue-roiter是給Vue.js提供的路由管理的插件，在使用vue-router時需要引入vue-router.js，可以用npm下載

注意：引入vue-router.js時要在引入的vue.js下面引入，vue-router.js是依賴vue.js的，如果位置放錯了會報錯
Vue-router的基本作用就是講每個路徑映射到對應(yīng)的組件，并通過修改路由進(jìn)行組件間的切換。

body寫法：

<div id="app">
<!--      1.router-link標(biāo)簽頁面解析出來是a標(biāo)簽-->
<!--      在原來要跳轉(zhuǎn)頁面直接用a標(biāo)簽，在Vue中用router-link   
          to='跳轉(zhuǎn)的頁面'   要跳轉(zhuǎn)的頁面名前面必須要有/，并且不用再創(chuàng)建新的html-->
   <router-link to='/index'>首頁</router-link>
   <router-link to='/detail'>詳情頁</router-link>
<!--       盛放導(dǎo)航對應(yīng)的內(nèi)容   不寫內(nèi)容會不顯示-->
   <router-view></router-view>
</div>

js：

//2.創(chuàng)建組件
    var index={
        template:`
            <h1>這是首頁</h1>
        `
    }
    
    var detail={
        template:`
            <h1>這是詳情頁</h1>
        `
    }
    
    //3.配置路由  const routes
    
    const routes=[
        //打開頁面顯示index
        {path:'/',component:index},
        {path:'/index',component:index},
        {path:'/detail',component:detail}
    ]
    
    //4.創(chuàng)建一個路由實例  const router
    
    const router=new VueRouter({
        routes:routes,
        //linkActiveClass默認(rèn)值是  router-link-active  更改linkActiveClass后面的值就可以自定義屬性名
        linkActiveClass:'active'
    })
    
    //5.把路由掛載到Vue實例中
    new Vue({
        el:'#app',
        router:router
    })

結(jié)果：
剛打開頁面時：

QQ截圖20180926174111.png

點擊首頁后：

QQ截圖20180926174123.png

QQ截圖20180926174132.png

二：路由的嵌套
點擊用戶頁后的效果

QQ截圖20180926174612.png

body:

<div id="app">
   <router-link to='/index'>首頁</router-link>
   <router-link to='/deital'>用戶頁</router-link>
   <router-view></router-view>
</div>

js:

    <script>
    //2.創(chuàng)建組件
    var Index={
        template:`
            <h1>我是首頁</h1>
        `
    }
    
    var Deital={
        template:`
            <div>
                <h1>我是用戶頁</h1>
                <ul>
                    <li>
                        <router-link to='/deital/user'>用戶</router-link>
                    </li>
                    <li>
                        <router-link to='/deital/login'>登錄</router-link>
                    </li>
                </ul>
                <router-view></router-view>
            </div>
        `
    }
    
    var User={
        template:`
          <h3>這是注冊頁</h3>
        `
    }
     var Login={
        template:`
          <h3>這是登錄頁</h3>
        `
    }
    
    //3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {
            path:'/deital',
            component:Deital,
            children:[//children后面跟數(shù)組   被嵌套的路由組件寫的時候前面不用加/
                {path:'user',component:User},
                {path:'login',component:Login}
            ]
        }
    ]
    
    //4.創(chuàng)建路由實例
    const router=new VueRouter({
        routes:routes
    })
    //5.把路由掛載到Vue實例中
    new Vue({
        el:'#app',
        router:router
    })
</script>

三：路由的傳參

路由傳參有兩種方式：
      第一種：<router-link to='/deital/user?uname=jack&&undw=123'></router-link>     
             ?參數(shù)名=值&&參數(shù)名=值  中間用&連接  可以寫一個&也可以寫兩個&&
      接收：用{{$route.query}}接收

      var User={
         template:`
            <div>
                <a href='#'>{{$route.query}}</a>
                <ul>
                    <li>{{$route.query.uname}}</li>
                    <li>{{$route.query.undw}}</li>
                </ul>
            </div>
         `
       }
     第二種：<router-link to='/deital/login/rose/456'></router-link>
             /參數(shù)名/數(shù)值    中間用/隔開
     接收：{{$route.params}}

      var Login={
        template:`
            <div>
                <a href='#'>{{$route.params}}</a>
                <ul>
                    <li>{{$route.params.userName}}</li>
                    <li>{{$route.params.password}}</li>
                </ul>
            </div>
        `
    }