vue-router基本概念及使用
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建立路由出口
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-03-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录