1.路由 2.路由的嵌套 3.路由的传参

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

注意：引入vue-router.js时要在引入的vue.js下面引入，vue-router.js是依赖vue.js的，如果位置放错了会报错
Vue-router的基本作用就是讲每个路径映射到对应的组件，并通过修改路由进行组件间的切换。

body写法：

<div id="app">
<!--      1.router-link标签页面解析出来是a标签-->
<!--      在原来要跳转页面直接用a标签，在Vue中用router-link   
          to='跳转的页面'   要跳转的页面名前面必须要有/，并且不用再创建新的html-->
   <router-link to='/index'>首页</router-link>
   <router-link to='/detail'>详情页</router-link>
<!--       盛放导航对应的内容   不写内容会不显示-->
   <router-view></router-view>
</div>

js：

//2.创建组件
    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.创建一个路由实例  const router
    
    const router=new VueRouter({
        routes:routes,
        //linkActiveClass默认值是  router-link-active  更改linkActiveClass后面的值就可以自定义属性名
        linkActiveClass:'active'
    })
    
    //5.把路由挂载到Vue实例中
    new Vue({
        el:'#app',
        router:router
    })

结果：
刚打开页面时：

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.创建组件
    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后面跟数组   被嵌套的路由组件写的时候前面不用加/
                {path:'user',component:User},
                {path:'login',component:Login}
            ]
        }
    ]
    
    //4.创建路由实例
    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>     
             ?参数名=值&&参数名=值  中间用&连接  可以写一个&也可以写两个&&
      接收：用{{$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>
             /参数名/数值    中间用/隔开
     接收：{{$route.params}}

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