Vue Router基本用法

VUE router
vue router 是vue.js的官方路由管理器
vue router 包含以下功能：
1.注册html5历史模式或hash模式
2.支持嵌套路由
3.支持路由参数
4.支持编程式路由
5.支持命名路由

Vue Router基本用法

1.引入相关库文件

    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router_3.0.2.js"></script>

2.添加路由链接
这里的默认渲染为标签
to 属性 默认渲染为 href属性
to 属性的值默认渲染为#开头的hash地址

            <!-- <router-link> ==> <a> -->
            <!-- to == href -->
            <router-link to="/user">user</router-link>
            <router-link to="/register">register</router-link>

            

3.添加路由填充符（路由占位符）

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

4.自定义路由组件

        const User = {
            template: `
            <h1>USER组件<h1>
            `
        };
        const Register = {
            template: `
            <h1>register组件<h1>
            `
        };

5.配置路由规则与并创建路由实例
注意：路由重定向

        // 创建路由实例
        const router = new VueRouter({
            // 所有路由规则
            routes: [{
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }, {
                // 路由重定向  
                path: '/', //原路径
                redirect: '/user' //新路径
            }]
        })

6.把路由实例挂载到VUE实例中

new Vue({
            el: '#app',
            data: {

            },
            methods: {

            },
            // 挂载路由 实例对象
            router,
        })