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建立路由出口


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号