首页 > 代码库 > vue-router基本概念及使用

vue-router基本概念及使用

2024-09-10 16:25:20   218人阅读

index.html：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6     <script src="http://unpkg.com/vue/dist/vue.js"></script>
 7     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 8 </head>
 9 <body> 
10     <div id="box">
11         <p>
12            <!-- 使用 router-link 组件来导航. -->
13             <!-- 通过传入 `to` 属性指定链接. -->
14             <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
15         <router-link to="/home">home</router-link>
16         <router-link to="/news">news</router-link>
17       </p>
18           <!-- 路由出口 -->
19           <!-- 路由匹配到的组件将渲染在这里 -->
20           <router-view></router-view>
21     </div>
22 
23     <script type="text/javascript">
24         // 1. 定义（路由）组件。
25         const Home = { template: ‘<div>首页</div>‘ }
26         const News = { template: ‘<div>新闻</div>‘ }
27 
28         // 2. 定义路由
29         // 每个路由应该映射一个组件
30         const routes = [
31           { path: ‘/home‘, component: Home },
32           { path: ‘/news‘, component: News }
33         ]
34 
35         // 3. 创建 router 实例，然后传 `routes` 配置
36         const router = new VueRouter({
37           routes // （缩写）相当于 routes: routes
38         })
39 
40         // 4. 创建和挂载根实例。
41         // 记得要通过 router 配置参数注入路由，
42         // 从而让整个应用都有路由功能
43         const app = new Vue({
44           router
45         }).$mount(‘#box‘)
46 
47         // 现在，应用已经启动了！
48     </script>
49 </body>
50 </html>

路由重定向

上面代码，我们应该设置打开浏览器就默认调整到 “首页”，所以需要把根路由/重定向到/home。 
修改路由配置：

 const routes = [
              { path: ‘/‘, redirect: ‘/home‘ },
             { path: ‘/home‘, component: Home },
             { path: ‘/news‘, component: News }
         ]

  

      1：建立路由组件

      2：建立映射

      3：建立路由实例

      4：使用router-link建立路由导航

      5：使用router-view建立路由出口

   

vue-router基本概念及使用


联系
我们