Day4.3路由redirect重定向的使用

 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 
24 <script>
25     // 创建组件模板对象
26     const login = {
27         template:'<h1>login组件</h1>'
28     };
29     const register = {
30         template:'<h1>register组件</h1>'
31     };
32 
33 //  创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了一个
34 //      路由的构造函数，叫作 VueRouter
35 //  在 new 路由对象的时候，可以为 构造函数传递一个配置对象
36     const routerObj = new VueRouter({
37         // route // 这个配置对象中的 route 表示【路由匹配规则】
38 
39         routes:[ // 路由匹配规则
40 
41             // 重定向，这里的 redirect 和 node 中的 redirect 完全是两码事
42             { path:'/',redirect:'/login'},
43 
44          // 每个路由规则都是一个对象，这个对象身上有两个必须的属性
45             //    属性1. path，表示监听哪个路由链接地址
46             //    属性2. component，表示如果路由是前面匹配到的path，则展示 component属性对应的那个组件
47             //  注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
48             { path:'/login',component:login },
49             { path:'/register',component:register }
50         ]
51     });
52 
53 
54     // 创建 vue 实例
55     const vm = new Vue({
56         el:'#app',
57         data:{},
58         methods:{},
59 
60         // 将路由规则对象注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
61         router:routerObj
62     })
63 </script>
64 </body>
Day4.3路由redirect重定向的使用

猜你喜欢
