Vue-Router路由 Vue-CLI脚手架和模块化开发 之 路由常用配置与路由嵌套

vue-router路由常用配置

1、mode：配置路由模式，默认为hash，由于URL很丑，可以修改为history，但是需要服务端的支持；

以上一篇的博文为实例：

初始时url的显示：

使用mode之后的显示：

使用mode的代码：

// 3 创建路由对象
        const myRouter = new VueRouter({
            //routes : routes
            routes : myRoutes,
            mode:'history'
        });

但是当复制该链接在新的窗口打开的时候，不能打开该链接，如图：

说明需要服务端的支持

2、redirect：重定向，可以设置默认页面；

初始时，默认页面是没有显示的如图：

使用 redirect重定向后：

使用redirect的代码：

//2 配置路由 路由可能有多个
        const myRoutes = [
            {
                path : "/home",
                component : Home
            },
            {
                path : "/foods",
                component : Foods
            },
        {
            path:"*",
                redirect:"/home"
            }
        ]
        

3、linkActiveClass：设置router-link激活样式；

由于router-link被渲染成为a标签：

有class，因此可以设置其点击时的样式：

修改该样式的css:

<style>

        .router-link-active{
            color: white;

            background-color: black;
        }
    </style>

也可以通过 linkActiveClass：样式名称 进行设置其样式

代码如下，效果图同上：

// 3 创建路由对象
        const myRouter = new VueRouter({
            //routes : routes
            routes : myRoutes,
            //mode:'history'
             linkActiveClass : "active"

        });

        new Vue({
            //router : router
            router : myRouter //4 注入路由 简写
        }).$mount("#one");
    </script>
    <style>

        .active{
            color: white;

            background-color: black;
        }
    </style>

路由嵌套

路由的嵌套：一个路由中嵌套（包含）其他的路由；

在路由的配置中，使用children可以配置子路由，children也可以配置多个，与routes一致；

在上面的实例中的美食下添加几个路由，添加的路由就是它的子路由：

初始只配置了它的跳转，并没有配置它的路由

初始时代码：

<template id="foods">

        <div>

            <h2>美食广场</h2>
            <ul>
                <li><router-link to="/foods/bjc">  北京菜</router-link></li>
                <li><router-link to="/foods/hnc">  湖南菜</router-link></li>
                <li><router-link to="/foods/xc">  湘菜</router-link></li>
                <li><router-link to="/foods/yc">  粤菜</router-link></li>
                <li><router-link to="/foods/scc">  四川菜</router-link></li>
            </ul>
        </div>
    </template>

let Foods = {
            template : "#foods"
        }

定义路由后：

<template id="foods">

        <div>

            <h2>美食广场</h2>
            <ul>
                <router-link to="/foods/bjc" tag="li">  北京菜</router-link>
                <router-link to="/foods/hnc" tag="li">  湖南菜</router-link>
                <router-link to="/foods/xc" tag="li">  湘菜</router-link>
                <router-link to="/foods/yc" tag="li">  粤菜</router-link>
                <router-link to="/foods/scc" tag="li">  四川菜</router-link>
            </ul>

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

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript" src="../js/vue-router.js" ></script>
    <script>

        //1 定义组件
        let Home = {
            template : "<h2>首页</h2>"
        }
        let Foods = {
            template : "#foods"
        }

        //定义foods中的子组件

        let Bjc={
            template : "<h3>北京菜</h3>"

        }

        let Hnc={
            template : "<h3>湖南菜</h3>"

        }
        let Xc={
            template : "<h3>湘菜</h3>"

        }

        let Yc={
            template : "<h3>粤菜</h3>"

        }

        let Scc={
            template : "<h3>四川菜</h3>"

        }

        //2 配置路由 路由可能有多个
        const myRoutes = [
            {
                path : "/home",
                component : Home
            },
            {
                path : "/foods",
                component : Foods,

                children:[
                {
                    path:"bjc",
                    component:Bjc

                },
                {
                    path:"hnc",
                    component:Hnc

                },

                {
                    path:"xc",
                    component:Xc

                },
                {
                    path:"yc",
                    component:Yc

                },
                {
                    path:"scc",
                    component:Scc

                }

                ]
            },
        {
            path:"*",
                redirect:"/home"
            }
        ]

使用tag标签可以将router-link渲染成为li标签：

以上实例的所有代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title> 路由的嵌套</title>
     </head>
     <body>
         <div id="one">
             <router-link to="/home">首页</router-link>
             <router-link to="/foods">美食</router-link>

             <div>
                 <!--将数据显示在这里-->
                 <router-view></router-view>
             </div>
         </div>
     </body>
     <template id="foods">

         <div>

             <h2>美食广场</h2>
             <ul>
                 <router-link to="/foods/bjc" tag="li">  北京菜</router-link>
                 <router-link to="/foods/hnc" tag="li">  湖南菜</router-link>
                 <router-link to="/foods/xc" tag="li">  湘菜</router-link>
                 <router-link to="/foods/yc" tag="li">  粤菜</router-link>
                 <router-link to="/foods/scc" tag="li">  四川菜</router-link>
             </ul>

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

     <script type="text/javascript" src="../js/vue.js" ></script>
     <script type="text/javascript" src="../js/vue-router.js" ></script>
     <script>

         //1 定义组件
         let Home = {
             template : "<h2>首页</h2>"
         }
         let Foods = {
             template : "#foods"
         }

         //定义foods中的子组件

         let Bjc={
             template : "<h3>北京菜</h3>"

         }

         let Hnc={
             template : "<h3>湖南菜</h3>"

         }
         let Xc={
             template : "<h3>湘菜</h3>"

         }

         let Yc={
             template : "<h3>粤菜</h3>"

         }

         let Scc={
             template : "<h3>四川菜</h3>"

         }

         //2 配置路由 路由可能有多个
         const myRoutes = [
             {
                 path : "/home",
                 component : Home
             },
             {
                 path : "/foods",
                 component : Foods,

                 children:[
                 {
                     path:"bjc",
                     component:Bjc

                 },
                 {
                     path:"hnc",
                     component:Hnc

                 },

                 {
                     path:"xc",
                     component:Xc

                 },
                 {
                     path:"yc",
                     component:Yc

                 },
                 {
                     path:"scc",
                     component:Scc

                 }

                 ]
             },
         {
             path:"*",
                 redirect:"/home"
             }
         ]

         // 3 创建路由对象
         const myRouter = new VueRouter({
             //routes : routes
             routes : myRoutes,
             //mode:'history'
              linkActiveClass : "active"

         });

         new Vue({
             //router : router
             router : myRouter //4 注入路由 简写
         }).$mount("#one");
     </script>
     <style>

         .active{
             color: white;

             background-color: black;
         }
     </style>
 </html>

路由嵌套