Vue-Router

时间:2021-01-29 小破的前端理想人气:0

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>

加载全部内容