weifeng123

前言

vue.js除了拥有组件开发体系之外,还有自己的路由vue-router。在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接。使用vue-router后,我们可以自己定义组件路由之间的跳转,还可以设置稍复杂的嵌套路由,创建真正的spa(单页面应用)。我之前用vue-cli脚手架写了一个简单的人员管理实例,现在我们不用脚手架,就用原生的vue来写,本文也主要是通过实例来讲解vue.js+vue-router相关知识。

简单路由跳转实例

1.起步

下载vue-router.js,新建项目文件夹命名为router,将下载的vue-router.js放在router/js/路径下。新建index.html作为主页,引入样式文件,引入两个关键的js,vue和vue-router,再在body标签底部引入一个main.js用来写vue实例及配置路由,注意引用顺序。

 
 1 <!DOCTYPE html>
 2  
 3 <html lang="en">
 4  
 5 <head>
 6  
 7 <meta charset="UTF-8">
 8  
 9 <title>首页</title>
10  
11 <link rel="stylesheet" href="css/main.css">
12  
13 <script src="js/vue.js"></script>
14  
15 <script src="js/vue-router.js"></script>
16  
17 </head>
18  
19 <body>
20  
21 <div id="app"></div>
22  
23 <template></template> //组件区域
24  
25 <script src="js/main.js"></script>
26  
27 </body>
28  
29 </html>

 

2.定义路由视图

调用foot-nav组件,将底部导航组件引入在这里,是因为两个路由页面都要用到它

 
1 <div id="app">
2  
3 <router-view></router-view>
4  
5 <foot-nav></foot-nav>
6  
7 </div>

 

知识点::<router-view>

<router-view>标签相当于一个插槽,用于将匹配到的组件渲染出来,一个个路由定义的组件相当于卡,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示。
一个组件可以有多个<router-view>视图,并用name值去区分它们,这种多用在网页布局方面,如上左主结构,这个时候就可以定义三个<router-view>
示例

 
 1 <div id="app">
 2  
 3 <router-view name="top"></router-view>
 4  
 5 <router-view name="left"></router-view>
 6  
 7 <router-view name="main"></router-view>
 8  
 9 </div>
10  
11  
12  
13 <script>
14  
15 var topCom = Vue.extend({
16  
17 template: \'<div>顶部</div>\'
18  
19 })
20  
21  
22  
23 var leftCom = Vue.extend({
24  
25 template: \'<div>侧边栏</div>\'
26  
27 })
28  
29  
30  
31 var mainCom = Vue.extend({
32  
33 template: \'<div>主页</div>\'
34  
35 })
36  
37  
38  
39 var router = new VueRouter({
40  
41 routes:[
42  
43 {
44  
45 path: \'/\',
46  
47 name: \'home\',
48  
49 components:{
50  
51 top: topCom,
52  
53 left: leftCom,
54  
55 main: mainCom
56  
57 }
58  
59 }
60  
61 ]
62  
63 })
64  
65  
66  
67 var app = new Vue({
68  
69 el: \'#app\',
70  
71 router
72  
73 })
74  
75 </script>

 

再为各个板块设置一下样式,打开浏览器查看效果

3.子组件(底部导航)

3.1 创建子组件

人员管理系统分为两个模块,一个首页,一个管理页,两个页面都需引入一个公共组件:底部导航。在首页index.html中加入以下模板

 
 1 <template id="footer">
 2  
 3 <div class="footer fixed">
 4  
 5 <ul>
 6  
 7 <li><router-link to="/">首页</router-link></li>
 8  
 9 <li><router-link :to="{name:\'manage\',params:{id:1}}">人员管理</router-link></li>
10  
11 </ul>
12  
13 </div>
14  
15 </template>

 

知识点::<router-link>

<router-link>标签主要实现跳转链接功能,属性to=\'/\'即是跳转到path为\'/\'的路径(我们等会得配置路径为\'/\'和\'/manage\'的路由)
router-link除了可以跳转链接之外,还可以传参,可以传多个参数,一般格式为

<router-link to="路由路径"></router-link>
<router-link :to="{ path:路由路径}"></router-link>
<router-link :to="{name:\'路由命名\',params:{参数名:参数值,参数名:参数值}}"></router-link>

知识点:this.$router.push

如果不想用<router-link>标签,也可以给需要跳转的地方添加一个点击事件,在事件里写this.$router.push方法

this.$router.push(\'路由路径\')
this.$router.push({name:\'路由命名\',params:{参数名:参数值,参数名:参数值}})

3.2 注册子组件

在main.js中全局注册子组件并且定义vue实例

 
 1 Vue.component(\'foot-nav\',{
 2  
 3 template: \'#footer\'
 4  
 5 })
 6  
 7  
 8  
 9 var app = new Vue({
10  
11 el: \'#app\'
12  
13 })

 

4.首页及管理页组件

4.1 创建首页及管理页

 
 1 <template id="index">
 2  
 3 <div>
 4  
 5 首页
 6  
 7 </div>
 8  
 9 </template>
10  
11 <template id="manage">
12  
13 <div>
14  
15 人员管理
16  
17 <p>id:{{id}}</p>
18  
19 </div>
20  
21 </template>

 

4.2 注册主页及管理页

 
 1 var Home = Vue.extend({
 2  
 3 template: \'#index\'
 4  
 5 })
 6  
 7  
 8  
 9 var Manage = Vue.extend({
10  
11 template: \'#manage\',
12  
13 data(){
14  
15 return{
16  
17 id: \'\'
18  
19 }
20  
21 },
22  
23 mounted:function(){
24  
25 this.id = this.$route.params.id
26  
27 }
28  
29 })

 

知识点:this.$route.params

this.$route指向vue实例的路由对象,params是路由传过来的参数集合

5.定义路由

定义路由router,并引进vue实例中

 
 1 var router = new VueRouter({
 2  
 3 routes:[
 4  
 5 {
 6  
 7 path:\'/\',
 8  
 9 name: \'home\',
10  
11 component:Home
12  
13 },
14  
15 {
16  
17 path:\'/manage/:id\',
18  
19 name: \'manage\',
20  
21 component:Manage
22  
23 }
24  
25 ]
26  
27 })
28  
29  
30  
31 var app = new Vue({
32  
33 el: \'#app\',
34  
35 router
36  
37 })

 

知识点:path:\'/路径/:参数名\'

一个路由要传参时,需在path路径后面添加一个‘/’并加上冒号和参数名

知识点:路由激活class

vue-router当路由处于激活状态时,会有一个class类“router-link-active”,我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
接下来去浏览器查看路由跳转效果

6.嵌套路由

有时我们项目由多层嵌套组件组成,这个时候就需要用到嵌套路由
先看下图例子,我们给manage路由再添加两个子路由

6.1 在组件内部添加<router-view>

 
 1 <template id="manage">
 2  
 3 <div>
 4  
 5 人员管理
 6  
 7 <ul>
 8  
 9 <li><router-link to="/manage/list">人员列表</router-link></li>
10  
11 <li><router-link to="/manage/edit">编辑</router-link></li>
12  
13 </ul>
14  
15 <router-view></router-view>
16  
17 </div>
18  
19 </template>

 

6.2 定义子路由

 
 1 //构建组件
 2  
 3 var List = Vue.extend({
 4  
 5 template: \'<div>人员列表</div>\'
 6  
 7 })
 8  
 9  
10  
11 var Edit = Vue.extend({
12  
13 template: \'<div>编辑</div>\'
14  
15 })
16  
17  
18  
19  
20  
21  
22  
23 var router = new VueRouter({
24  
25 routes:[
26  
27 {
28  
29 path:\'/\',
30  
31 name: \'home\',
32  
33 component:Home
34  
35 },
36  
37 {
38  
39 path:\'/manage\',
40  
41 name: \'manage\',
42  
43 component:Manage,
44  
45 //子路由由children表示
46  
47 children:[
48  
49 {
50  
51 path:\'list\',
52  
53 name: \'list\',
54  
55 component:List
56  
57 },
58  
59 {
60  
61 path:\'edit\',
62  
63 name: \'edit\',
64  
65 component:Edit
66  
67 }
68  
69 ]
70  
71 }
72  
73 ]
74  
75 })

 

7.路由重定向

未设置路由重定向时,当我们随意输入一个路径,会显示一片空白或404。为了防止这种现象发生,我们一般在配置路由时再定义一个重定向路由

 

 1  
 2 var router = new VueRouter({
 3  
 4 routes:[
 5  
 6 {
 7  
 8 path:\'/\',
 9  
10 name: \'home\',
11  
12 component:Home
13  
14 },
15  
16 {
17  
18 path:\'*\',
19  
20 redirect: \'/\'
21  
22 },
23  
24 ]
25  
26 })

 

 

打开浏览器,随意输入一个未定义的路由查看效果

分类:

技术点:

相关文章: