vue的路由与嵌套路由

1.首先我们要引入vue文件和vue-router文件，可以用在线的cnd链接

 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

会在全局暴露VueRouter这个方法,

然后我们要定义好待显示的组件

    var Home={
        template:`<div><h1>home组件
</h1></div>`   
    }
    var About={
        template:`<div><h1>About组件</h1></div>`
    }

定义好路由映射关系

 var routes=[//路线
        //路由表。里面很多路由规则，component：组件名，path路径,数组，里面是一个个对象
        {path:'/home',component:Home,name:'home'},
        {path:'/about',component:About,name:'about'},
        {path:'',component:Home,name:'index'},//默认访问时的组件,但是传统是a链接跳转，底层是锚点
    ]

实例化路由器

 var router=new VueRouter({
        routes:routes,//路由器,属性名属性值一致可以简写成一个
    })//参数为路由映射表

注册路由器

var vm = new Vue({
        el: '#box',   
        router:router,//注册路由器，可以简写成一个 
    })

在实例化的地方box，显示

<div id="box">
 <router-view></router-view>
</div>

打开页面后啥也没有，但是地址栏会出现

//看到这样已经配置成功
    // http://localhost:63342/code/myWorks/mytest/thirdWeek/day2/pmVueRouterTest/vueRouter.html?_ijt=3slbjgsnnnmv6h51omuqds3qdc#/
    /**
     * 在尾部加home,about可以显示相应的内容，但是应该是在页面初次加载就显示，而不是手动地址栏输入
     * */

那我们就加上a标签好了。

<div id="box">
    <!--设置spa应用，显示-->
    <!--    active点中时候是这个状态，就不能使用a链接的描点跳转，router-link-->
    <ul>
        <li><a href="#/home">1</a></li>
        <li><a href="#/about">2</a></li>
    </ul>
 
    <router-view></router-view>
    <!--    最后-->
</div>

这样就能点到哪里跳哪里。但是a标签局限还是有的，我们可以用vue-router给我们的一个标签router-link。
这个标签还挺神奇的，

  <li><router-link to="/home" tag="button">2</router-link></li>
        <li><router-link to="/about">3</router-link></li>

虽然说它默认也是一个a标签，但是可以通过它的属性tag来改变它,但是它这个to="/home"斜杠前面不用加#。另外，那个点击时候有个属性class名

image.png

你可以通过修改这个改变它被点击时候的样式，若你不想用这个名字
也可以另外设置点击时候的class名

var router=new VueRouter({
        routes:routes,//路由器,可以简写成一个
        //还可以自定义点击时候样式的类名
        linkActiveClass:'active'
    })//参数为路由映射表

这个active的这个类，就随你在css设置样式了。

假如给home加上二级菜单呢？同时我点中哪个就要给我传值过来。

  var Home={
        template:`<div><h1>home组件
<ul>
<li><a href="#/home/aa/1">哈哈</a></li>
<li><a href="#/home/aa/2">哈哈哈</a></li>
<li><a href="#/home/aa/3">哈哈哈</a></li>
</ul>
</h1></div>`

比如我要点击哪个选项，就会给我在当前页输出这个id，那我来定义一下，点击二级菜单时候会出现的页面是什么样的

  //$route模型变量是vue-router封装好的，主键实例对象就存在，route.params获取动态路由相关参数，id取决于之前明明
    var detral={
        template:`<div><h1>新闻峡谷情 id=</h1></div>`
    }

然后在设置一条路由

{path:'/home/aa/:id/',component:detral,name:'aa'}
//此时：id的这个名称随意，但是一定要冒号。这里设置名称叫id，这里的id为路由动态参数

然后再定义的模板里面拿到这个参数

 //$route模型变量是vue-router封装好的，主键实例对象就存在，route.params获取动态路由相关参数，id取决于之前明明
    var detral={
        template:`<div><h1>新闻峡谷情 id={{$route.params.id}}</h1></div>`
    }

同样你可以设置多个参数

 var Home={
        template:`<div><h1>home组件
<ul>
<li><a href="#/home/aa/1/jingrong">哈哈</a></li>
<li><a href="#/home/aa/2/xixi">哈哈哈</a></li>
<li><a href="#/home/aa/3/lala">哈哈哈</a></li>
</ul>
</h1></div>`

路由表里面

{path:'/home/aa/:id/:type',component:detral,name:'aa'}

模板修改

 var detral={
        template:`<div><h1>新闻峡谷情 id={{$route.params.id}}{{$route.params.type}}</h1></div>`
    }

这个时候做完你会发现一个小bug，它点击之后是渲染在一级菜单管理下的区域，会覆盖的，所以我们只想让它在特定区域显示的话只能通过路由嵌套了。

模板改成这样

  var Home={
        template:`<div><h1>home组件
<ul>
<li><a href="#/home/aa/1/jingrong">哈哈</a></li>
<li><a href="#/home/aa/2/xixi">哈哈哈</a></li>
<li><a href="#/home/aa/3/lala">哈哈哈</a></li>
</ul>
<div>详情在这里显示<router-view></router-view></div>

</h1></div>`

路由改写,嵌套一个子路由

 {path:'/home',component:Home,name:'home',children:[
            //这个path不能加上/，因为它将这个path和父级的/home拼接,嵌套路由,让它在该显示的地方显示
                { path:'aa/:id/:type',component:detral,name:'aa'},
            ]},

如果我们想要在about这个模板有个摁扭，是返回前一页呢？就不能用嵌套路由了把，这个。这个时候就要用路由函数了

 var About={
        methods:{
            goback:function () {
                //跳转到home
                // this.$router.push('/home');//会跳转到home，路由参数是$route.params
                //push的路由参数是路由表里面的path
                // this.$router.back();//后退一步，自带的，从哪来，回哪去
                // this.$router.go();//history证书向前,负数向后,有问题
            }
        },
        template:`<div><h1>About组件</h1>
<button @click="goback">回到首页</button>
</div>`
    }

绑定摁扭的事件后再methods里面设置$router自带的函数。