• Day4.2router-link的使用


     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="../lib/js/vue.js"></script>
     7     <!--    第一步:安装 vue-router -->
     8     <script src="../lib/js/vue-router.js"></script>
     9 </head>
    10 <body>
    11 <div id="app">
    12 <!--    <a href="#/login">登录</a>-->
    13 <!--    <a href="#/register">注册</a>-->
    14 <!--    router-link 的使用
    15             router-link 默认渲染为一个  a  标签,也可以使用 tag='span' 渲染为指定的标签 -->
    16     <router-link to="/login">登录</router-link>
    17     <router-link to="/register">注册</router-link>
    18 
    19     <!--    router-view 是由 vue-router 提供的,专门用来当作占位符的,将来路由规则匹配到的组件
    20                就会展示到这个 router-view 中去-->
    21     <router-view></router-view>
    22 </div>
    23 <script>
    24     // 创建组件模板
    25     const login = {
    26         template:'<h1>login组件</h1>'
    27     };
    28     const register = {
    29         template:'<h1>register组件</h1>'
    30     };
    31 //  创建一个路由对象,当导入 vue-router 包之后,在 window 全局对象中,就有了一个
    32 //      路由的构造函数,叫作 VueRouter
    33 //  在 new 路由对象的时候,可以为 构造函数传递一个配置对象
    34     const routerObj = new VueRouter({
    35         // route // 这个配置对象中的 route 表示【路由匹配规则】
    36 
    37         routes:[ // 路由匹配规则
    38             // 每个路由规则都是一个对象,这个对象身上有两个必须的属性
    39             //    属性1. path,表示监听哪个路由链接地址
    40             //    属性2. component,表示如果路由是前面匹配到的path,则展示 component属性对应的那个组件
    41             { path:'/login',component:login },
    42             { path:'/register',component:register }
    43         ]
    44     });
    45 
    46     const vm = new Vue({
    47         el:'#app',
    48         data:{},
    49         methods:{},
    50 
    51         // 将路由规则对象注册到 vm 实例上,用来监听 URL 地址的变化,然后展示对应的组件
    52         router:routerObj
    53     })
    54 </script>
    55 </body>
    56 </html>
  • 相关阅读:
    JavaBean命名不规范导致数据导出丢失
    Vue应用部署
    vue-cli的lib库模式下调试和不输出map文件
    Vue CLI的理解
    MongoDB副本集原理
    MongDB副本集成员状态
    Appium Android环境搭建
    如何自己实现一个HTMLRunner
    使用Flask搭建基于unittest的简单用例挑选及执行平台
    Django Admin中增加导出Excel功能
  • 原文地址:https://www.cnblogs.com/zhaohui-116/p/12241459.html
Copyright © 2020-2023  润新知