Vue-Router路由 Vue-CLI腳手架和模塊化開發之路由經常使用配置與路由嵌套

時間 2019-11-17

標籤 vue router 路由 cli 腳手架模塊化開發經常使用配置嵌套欄目系統網絡简体版

原文原文鏈接

vue-router路由經常使用配置

一、mode：配置路由模式，默認爲hash，因爲URL很醜，能夠修改成history，可是須要服務端的支持；javascript

以上一篇的博文爲實例：css

初始時url的顯示：html

使用mode以後的顯示：vue

使用mode的代碼：java

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

可是當複製該連接在新的窗口打開的時候，不能打開該連接，如圖：vue-router

說明須要服務端的支持ide

二、redirect：重定向，能夠設置默認頁面； url

初始時，默認頁面是沒有顯示的如圖：spa

使用 redirect重定向後：3d

使用redirect的代碼：

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

三、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標籤：

以上實例的全部代碼：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title> 路由的嵌套</title>
  6     </head>
  7     <body>
  8         <div id="one">
  9             <router-link to="/home">首頁</router-link>
 10             <router-link to="/foods">美食</router-link>
 11             
 12             <div>
 13                 <!--將數據顯示在這裏-->
 14                 <router-view></router-view>
 15             </div>
 16         </div>
 17     </body>
 18     <template id="foods">
 19         
 20         
 21         <div>
 22             
 23             <h2>美食廣場</h2>
 24             <ul>
 25                 <router-link to="/foods/bjc" tag="li">  北京菜</router-link>
 26                 <router-link to="/foods/hnc" tag="li">  湖南菜</router-link>
 27                 <router-link to="/foods/xc" tag="li">  湘菜</router-link>
 28                 <router-link to="/foods/yc" tag="li">  粵菜</router-link>
 29                 <router-link to="/foods/scc" tag="li">  四川菜</router-link>
 30             </ul>
 31             
 32             <router-view></router-view>
 33         </div>
 34     </template>
 35     
 36     <script type="text/javascript" src="../js/vue.js" ></script>
 37     <script type="text/javascript" src="../js/vue-router.js" ></script>
 38     <script>
 39         
 40         //1 定義組件
 41         let Home = {
 42             template : "<h2>首頁</h2>"
 43         }
 44         let Foods = {
 45             template : "#foods"
 46         }
 47         
 48         //定義foods中的子組件
 49         
 50         let Bjc={
 51             template : "<h3>北京菜</h3>"
 52             
 53         }
 54         
 55         let Hnc={
 56             template : "<h3>湖南菜</h3>"
 57             
 58         }
 59         let Xc={
 60             template : "<h3>湘菜</h3>"
 61             
 62         }
 63         
 64         let Yc={
 65             template : "<h3>粵菜</h3>"
 66             
 67         }
 68         
 69         let Scc={
 70             template : "<h3>四川菜</h3>"
 71             
 72         }
 73         
 74         //2 配置路由 路由可能有多個
 75         const myRoutes = [
 76             {
 77                 path : "/home",
 78                 component : Home
 79             },
 80             {
 81                 path : "/foods",
 82                 component : Foods,
 83                 
 84                 children:[
 85                 {
 86                     path:"bjc",
 87                     component:Bjc
 88                 
 89                 
 90                 },
 91                 {
 92                     path:"hnc",
 93                     component:Hnc
 94                 
 95                 
 96                 },
 97                 
 98                 {
 99                     path:"xc",
100                     component:Xc
101                 
102                 
103                 },
104                 {
105                     path:"yc",
106                     component:Yc
107                 
108                 
109                 },
110                 {
111                     path:"scc",
112                     component:Scc
113                 
114                 
115                 }
116                 
117                 
118                 
119                 
120                 
121                 ]
122             },
123         {
124             path:"*",
125                 redirect:"/home"
126             }
127         ]
128         
129         // 3 建立路由對象
130         const myRouter = new VueRouter({
131             //routes : routes
132             routes : myRoutes,
133             //mode:'history'
134              linkActiveClass : "active"
135 
136         });
137         
138         new Vue({
139             //router : router
140             router : myRouter //4 注入路由 簡寫
141         }).$mount("#one");
142     </script>
143     <style>
144         
145         
146         .active{
147             color: white;
148             
149             background-color: black;
150         }
151     </style>
152 </html>