Vue-Router

vue-router拥有的功能：

支持h5历史模式或者hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名式路由

 

如何使用vue-router

1.使用router-link标签，在HTML中将转化为a标签，属性to为跳转的位置，HTML中为href

2.使用路由占位符，用于渲染路由数据

 <div class="app">
        <router-link to='/user'>user</router-link>
        <router-link to='/register'>register</router-link>

        <router-view></router-view>
        <!-- 路由占位符 -->
    </div>

3.实列模块

  var user = {
            template: '<h1>user</h1>'
        }
        var register = {
            template: '<h1>register</h1>'
        }

 

4.导入vue-router

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

必须在导入vue之后导入

5.实列vue-router,并添加路由规则

 var router = new VueRouter({
            //路由规则
            routes: [
                { path: '/user', component: user },
                { path: '/register', component: register }
            ]
        })

path为路由应用到的地址，component为应用的组件

6.挂载路由

 var app = new Vue({
            el: '.app',
            router:router
        })

就这样一个简单的vue-router就实现了，完全代码以及运行页面如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div class="app">
        <router-link to='/user'>user</router-link>
        <router-link to='/register'>register</router-link>

        <router-view></router-view>
        <!-- 路由占位符 -->
    </div>
    <script>
        var user = {
            template: '<h1>user</h1>'
        }
        var register = {
            template: '<h1>register</h1>'
        }
        var router = new VueRouter({
            //路由规则
            routes: [
                { path: '/user', component: user },
                { path: '/register', component: register }
            ]
        })
        var app = new Vue({
            el: '.app',
            router:router
        })

    </script>
</body>

</html>

 <hr以上为基础路由建设

完成以上代码后会发现，刚进页面时一个组件都没有显示，这是因为我们没有写根路径的规则，下面我们进行路由重定向

  var router = new VueRouter({
            //路由规则
            routes: [
                { path: '/', component: user },
                { path: '/user', component: user },
                { path: '/register', component: register }
            ]
        })

就这样首页就可以默认加载一个组件

<hr>

嵌套路由

嵌套路由就是在父级路由里面再下一个子路由，可以看一下图片理解

 

 再点击了register后才显示子路由的信息

1.修改扶组件的内容

 var register = {
            template: "<div><h1>register</h1> <h1>子路由</h1><router-link to='/register/kid1'>kid1</router-link><router-link to='/register/kid2'>kid2</router-link ><router-view/></div> "
        }

子路由和之前写负路由一样的，router-link和router-view都要有

2.写子路由组件

  var kid1 = {
            template: '<h1>kid1</h1>'
        }
        var kid2 = {
            template: '<h1>kid2</h1>'
        }

3.修改路由配置

 {
                    path: '/register', component: register,
                    children: [
                        { path: '/register/kid1', component: kid1 },
                        { path: '/register/kid2', component: kid2 }
                    ],
                }

子路由的路径必须写在夫路由路径下

完全代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 9     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
10 </head>
11 
12 <body>
13     <div class="app">
14         <router-link to='/user'>user</router-link>
15         <router-link to='/register'>register</router-link>
16 
17         <router-view></router-view>
18         <!-- 路由占位符 -->
19     </div>
20     <script>
21 
22         var user = {
23             template: '<h1>user</h1>'
24         }
25         var register = {
26             template: "<div><h1>register</h1> <h1>子路由</h1><router-link to='/register/kid1'>kid1</router-link><router-link to='/register/kid2'>kid2</router-link ><router-view/></div> "
27         }
28       
29         var kid1 = {
30             template: '<h1>kid1</h1>'
31         }
32         var kid2 = {
33             template: '<h1>kid2</h1>'
34         }
35         var router = new VueRouter({
36             //路由规则
37             routes: [
38                 { path: '/', component: user },
39                 { path: '/user', component: user },
40                 {
41                     path: '/register', component: register,
42                     children: [
43                         { path: '/register/kid1', component: kid1 },
44                         { path: '/register/kid2', component: kid2 }
45                     ],
46                 }
47 
48             ]
49         })
50         var app = new Vue({
51             el: '.app',
52             router: router
53         })
54 
55     </script>
56 </body>
57 
58 </html>
View Code

 命名路由

顾名思义命名路由就是给路由规则命名，在使用router-link的时候直接写路由名称就可以使用相关规则，如：

  <router-link :to="{name:'user'}">user</router-link>
  { name: 'user', path: '/user', component: user },

编程式路由

通过调用JavaScript形势调用api实现的导航方式叫编程式路由

  var user = {
            template: '<h1>user<button @click="goregister">到user</button></h1>',
            methods: {
                goregister: function () {
                    this.$router.push('/register')
                }
            }
        }

 

 同理还可以会用this.$router.go()实现上一部和下一步，历史操作。

 

posted @ 2021-01-30 13:09  小破的博客  阅读(107)  评论(0)  编辑  收藏  举报