码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router基本概念及使用

时间:2017-03-26 11:21:28      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:pat   导航   修改   htm   news   设置   home   bsp   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建立路由出口

   

vue-router基本概念及使用

标签:pat   导航   修改   htm   news   设置   home   bsp   router   

原文地址:http://www.cnblogs.com/hi-shepherd/p/6621811.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!