碎言博客

Vue快速学习笔记(5)使用路由vue-router(1)

J.sky 2020-02-12 19:03:02 Vue

在Vue中使用路由vue-router

  1. html 中导入vue-router.
  2. 编写 router-link router-view 标签代码
  3. JavaScript 中编写模板对象,定义路由对象及创建Vue实例。

具体代码参考:

<div id="app">
    <!-- 使用router-link定义组件导航 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 使用 router-view 显示匹配的组件 -->
    <router-view></router-view>
</div>

<script>
    const login = {
        template: '<h1>登录组件</h1>'
    }
    const register = {
        template: '<h1>注册组件</h1>'
    }

    // 创建一个路由示例,通过routers属性来匹配规则
    const routerobj = new VueRouter({
        routes: [{
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                component: login
            },
            {
                path: '/register',
                component: register
            }
        ]
    });
    // 穿件Vue实例
    var vm = new Vue({
        el: '#app',
        router: routerobj
    });
</script>
发现错误?想参与编辑? 在 GitHub 上编辑此页!

如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问

Python/Javascript学习QQ群号:217840699