vue-router vue路由

Posted 2020-09-23 孙三峰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-router vue路由相关的知识，希望对你有一定的参考价值。

vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：

准备一个根组件　　vue.extend()；
需要做路由的内容准备　　template；
准备路由 new VueRouter（）；
关联路由 map
启动路由 start(App,‘#box‘)；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中

　　github上vue-router下载地址：　　https://github.com/vuejs/vue-router

关于路由跳转的简单代码如下：

　　vue-router 路由(根据url不同，出现不同效果，用0.1.13版本)
　　v-link //跳转链接
　　router-view //展示内容
　　　　1.)在外层定义一个id为box的div，用来以后绑定路由。在html中用v-link来绑定路由跳转的路径，例如：v-link="{path:‘/home‘}"
　　　　2.)准备根组件，为以后的绑定做准备。var App=Vue.extend();
　　　　3.)为每个路径定义要显示的内容，例：
　　　　　　var Home=Vue.extend({
　　　　　　　　template:‘<h3>我是第一个a的内容页</h3>‘
　　　　　　});
　　　　4.)准备路由　　var router = new VueRouter();
　　　　5.)关联路由
　　　　　　router.map({
　　　　　　　　‘home‘:{
　　　　　　　　　　component:Home
　　　　　　}
　　　　6.)启动路由 router.start(App,‘#box‘);

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <script type="text/javascript" src="js/vue.js" ></script>
 6         <script type="text/javascript" src="js/vue-router.js" ></script>
 7         <script type="text/javascript" src="js/vue-resource.js" ></script>
 8         <title></title>
 9     </head>
10     <body>
11         <div id="box">
12             <ul>
13                 <li>
14                     <a v-link="{path:‘/home‘}">我是第一个a</a>
15                 </li>
16                 <li >
17                     <a v-link="{path:‘news‘}">我是第二个a</a>
18                 </li>
19             </ul>
20             <div>
21                 <router-view></router-view>
22             </div>
23         </div>
24     </body>
25     <script>
26         //1.准备一个根组件
27         var App=Vue.extend();
28         
29         //2.Home News 组件准备
30         var Home=Vue.extend({
31             template:‘<h3>我是第一个a的内容页</h3>‘
32         });
33         
34         var News=Vue.extend({
35             template:‘<h3>我是第二个a的内容页</h3>‘
36         })
37         
38         //3.准备路由
39         var router = new VueRouter();
40         
41         //4.关联
42         
43         router.map({
44             ‘home‘:{
45                 component:Home
46             },
47             ‘news‘:{
48                 component:News
49             }
50         })
51         
52         //5.启动路由
53         
54         router.start(App,‘#box‘);
55     </script>
56 </html>

如果要默认显示为home页，需要在启动路由前加

　　router.redirect({
　　　　‘/‘:‘/home‘
　　});

以上是关于vue-router vue路由的主要内容，如果未能解决你的问题，请参考以下文章

vue路由对象（$route）参数简介

vue-router 2.0 常用基础知识点之router-link

Vue-router路由基础总结

Vue-Router的使用详解

vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {