Vue中router-link标签的使用

最新推荐文章于 2024-05-10 08:54:50 发布

键盘的打工仔

最新推荐文章于 2024-05-10 08:54:50 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_45616246/article/details/105544729

版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的router-link</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <script src="../../vue/vue-router-v3.1.6.js"></script>

</head>
<body>
<div id="app">
    <!-- 注意: href中写的路径前必须加 # -->
    <!--<a href="#/login">登录</a>-->
    <!--<a href="#/register">注册</a>-->
    <!-- router-link默认渲染为一个 a 标签,
        使用 tag 属性可以指定渲染成某个标签
        匹配路径前不用加 # -->
    <router-link to="/login" tag="span">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- vue-router提供的元素,有点占位符的味道,
        当路径匹配成功后,会把对应的组件渲染到这个位置-->
    <router-view></router-view>
</div>
</body>
<script>
    var login = {
        template: '<h1>登录组件</h1>'
    };
    var register = {
        template: '<h1>注册组件</h1>'
    };
    // 当导入了vue-router这个包后,window对象中会有一个VueRouter的构造函数
    var routerObj = new VueRouter({
        // routes: 路由匹配规则数组
        routes: [
            // path: 匹配路径; component: 路径匹配成功后,显示的组件
            // ****注意: component 后面放的是组件对象,不是组件名称****
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    });
    var vm = new Vue({
        el: '#app',
        // 将路由注册到Vue实例中
        router: routerObj
    });
</script>
</html>

键盘的打工仔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中router-link标签的使用

请陛下批阅<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由的router-link</title> <script src="../../vue/vue-v2.6.11.js"></scr...
复制链接

扫一扫