Vue学习笔记（十一）：路由管理

 

 

1 Vue路由基本使用¶

1.1 安装¶

Vue中默认并不提供路由功能，需要安装其插件Vue-router，如下所示，其中“@3”表示安装版本3

npm i vue-router@3

1.2 创建路由¶

在src目录下创建路由文件目录，目录名为“router”，并在该目录下创建“index.js”文件，文件内容如下所示，代码中，创建了一个路由器，其中配置了两个路由“about”和“home”,分别对应组件“About”和“Home”。

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
    	{
    		path:'/about',
    		component:About
    	},
    	{
    		path:'/home',
    		component:Home
    	}
    ]
})

随后，还需要在main.js文件中引入并应用路由：

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    router:router
})

1.3 在组件模板中应用路由¶

在组件模板中，<router-link>标签实现跳转，<router-view>标注展现位置。<router-link>标签如下：

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

<router-view>标签如下：

<router-view></router-view>

About.vue内容如下：

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default {
    	name:'About'
    }
</script>

Home.vue内容如下：

<template>
    <h2>我是Home的内容</h2>
</template>

<script>
    export default {
    	name:'Home'
    }
</script>

完整App.vue代码如下：

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
    				<!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

    				<!-- Vue中借助router-link标签实现路由的切换 -->
    				<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
    					<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
    	name:'App',
    }
</script>

页面效果如下图所示：

 

 

2 多级路由（嵌套路由）¶

在介绍页面路由之前，我们先在src目录下创建pages目录，然后将About.vue和Home.vue等页面组件，移动到pages目录下，然后对main.js文件内容进行对应修改。

添加Message.vue和News.vue两个组件，Message.vue文件内容如下：

<template>
    <div>
    	<ul>
    		<li>
    			<a href="/message1">message001</a>&nbsp;&nbsp;
    		</li>
    		<li>
    			<a href="/message2">message002</a>&nbsp;&nbsp;
    		</li>
    		<li>
    			<a href="/message/3">message003</a>&nbsp;&nbsp;
    		</li>
    	</ul>
    </div>
</template>

<script>
    export default {
    	name:'Message'
    }
</script>

News.vue文件内容如下：

<template>
    <ul>
    	<li>news001</li>
    	<li>news002</li>
    	<li>news003</li>
    </ul>
</template>

<script>
    export default {
    	name:'News'
    }
</script>

因为Message.vue和News.vue两个组件都是Home组件的子组件，所以Home.vue文件内容也要进行修改，修改后内容如下：

<template>
    <div>
    	<h2>Home组件内容</h2>
    	<div>
    		<ul class="nav nav-tabs">
    			<li>
    				<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
    			</li>
    			<li>
    				<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
    			</li>
    		</ul>
    		<router-view></router-view>
    	</div>
    </div>
</template>

<script>
    export default {
    	name:'Home',
    }
</script>

路面最终效果如下所示：

 

 

3 路由传参¶

3.1 query传参¶

在某些场景下，路由也需要带参数，例如上述例子中，Message组件下，点击message001、message002、message003时，可以附带参数，实现跳转后统一Detail组件下的不同内容场景。我们把Message组件内容改为如下所示，<router-link>中to参数改为v-bind绑定，其内容改为一个对象配置项，配置项中，path为路由，指向Detail组件，query为传递的传输。

<template>
    <div>
    	<ul>
    		<li v-for="m in messageList" :key="m.id">
    			<!-- 跳转路由并携带query参数，to的字符串写法 -->
    			<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

    			<!-- 跳转路由并携带query参数，to的对象写法 -->
    			<router-link :to="{
    				path:'/home/message/detail',
    				query:{
    					id:m.id,
    					title:m.title
    				}
    			}">
    				{{m.title}}
    			</router-link>
    		
    		</li>
    	</ul>
    	<hr>
    	<router-view></router-view>
    </div>
</template>

<script>
    export default {
    	name:'Message',
    	data() {
    		return {
    			messageList:[
    				{id:'001',title:'消息001'},
    				{id:'002',title:'消息002'},
    				{id:'003',title:'消息003'}
    			]
    		}
    	},
    }
</script>

Detail组件内容如下，通过组件实例下的$route.query对象，可以读取通过路由传递过来的参数：

<template>
    <ul>
    	<li>消息编号：{{$route.query.id}}</li>
    	<li>消息标题：{{$route.query.title}}</li>
    </ul>
</template>

<script>
    export default {
    	name:'Detail',
    	mounted() {
    		console.log(this.$route)
    	},
    }
</script>

Detail组件的路由，也需要在router/index.js中重新配置：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
    	{
    		path:'/about',
    		component:About
    	},
    	{
    		path:'/home',
    		component:Home,
    		children:[
    			{
    				path:'news',
    				component:News,
    			},
    			{
    				path:'message',
    				component:Message,
    				children:[
    					{
    						path:'detail',
    						component:Detail,
    					}
    				]
    			}
    		]
    	}
    ]
})

页面效果如下图所示：

3.2 param传参¶

vue中也可以使用param参数进行参数，这种方式比query方式更加优雅一些。使用这种方式是，在router/index.js配置文件中，在对Detail组件配置path参数是，进行说明。千万注意，在使用param方式进行传参时，<router-link>标签内不能再使用path配置路由了，一定要使用name参数。：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
    	{
    		name:'guanyu',
    		path:'/about',
    		component:About
    	},
    	{
    		path:'/home',
    		component:Home,
    		children:[
    			{
    				path:'news',
    				component:News,
    			},
    			{
    				path:'message',
    				component:Message,
    				children:[
    					{
    						name:'xiangqing',
    						path:'detail/:id/:title',  // 此处进行配置，说明要接受id和title两个参数
    						component:Detail,
    					}
    				]
    			}
    		]
    	}
    ]
})

在Massage.vue中，读取param传递参数方式如下所示：

<template>
    <div>
    	<ul>
    		<li v-for="m in messageList" :key="m.id">
    			<!-- 跳转路由并携带params参数，to的字符串写法 -->
    			<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

    			<!-- 跳转路由并携带params参数，to的对象写法 -->
    			<router-link :to="{
    				name:'xiangqing',
    				params:{
    					id:m.id,
    					title:m.title
    				}
    			}">
    				{{m.title}}
    			</router-link>
    		
    		</li>
    	</ul>
    	<hr>
    	<router-view></router-view>
    </div>
</template>

<script>
    export default {
    	name:'Message',
    	data() {
    		return {
    			messageList:[
    				{id:'001',title:'消息001'},
    				{id:'002',title:'消息002'},
    				{id:'003',title:'消息003'}
    			]
    		}
    	},
    }
</script>

Detail组件中读取数据的方式也要跟着变化：

<template>
    <ul>
    	<li>消息编号：{{$route.params.id}}</li>
    	<li>消息标题：{{$route.params.title}}</li>
    </ul>
</template>

<script>
    export default {
    	name:'Detail',
    	mounted() {
    		// console.log(this.$route)
    	},
    }
</script>

页面效果如下图所示：

3.3 props接收参数¶

在上述介绍query和param传参数，我们都是使用$router.query或$router.param进行接收参数，每次接收参数都要写这两个对象，不免有些麻烦。为简便代码，vue提供props进行接收参数，配置改参数后，所有路由传递的参数，都将以props的形式传递给组件。

在接收参数的组件配置路由时，添加props配置项，例如在配置Detail组件路由时，添加props配置项，书写方式有三种，如下所示。注意，第二种方式只能用于param方式传参，第三种方式最灵活，可同时运用于param和query方式传参，也能添加其他参数。：

{
    name:'xiangqing',
    path:'detail',
    // path:'detail/:id/:title',
    component:Detail,

    //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。这种方式用的很少，因为传递的参数是写死的。
    // props:{a:1,b:'hello'}

    //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。注意，这种方式只能用于param方式传参。
    // props:true

    //props的第三种写法，值为函数
    props($route){
        return {
            id:$route.query.id,
            title:$route.query.title,
            a:1,
            b:'hello'
        }
    }

}

当然，这时候在Detail也需要配置props参数：

<template>
    <ul>
    	<li>消息编号：{{id}}</li>
    	<li>消息标题：{{title}}</li>
    </ul>
</template>

<script>
    export default {
    	name:'Detail',
    	props:['id','title'],
    }
</script>

 

 

4 路由命名¶

为路由命名可以简化代码，方便维护。命名的方式也很简单，在router/index.js路由配置内，添加一个name配置项即可，如下所示我们为About组件和Detail组件的路由进行命名：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
    	{
    		name:'guanyu',
    		path:'/about',
    		component:About
    	},
    	{
    		path:'/home',
    		component:Home,
    		children:[
    			{
    				path:'news',
    				component:News,
    			},
    			{
    				path:'message',
    				component:Message,
    				children:[
    					{
    						name:'xiangqing',
    						path:'detail',
    						component:Detail,
    					}
    				]
    			}
    		]
    	}
    ]
})

命名后，我们可以对<router-link>标签进行改写，例如，Message.vue文件中的<router-link>标签改为如下：

<router-link :to="{
    name:'xiangqing',
    query:{
        id:m.id,
        title:m.title
    }
}">

App.vue中的跳转到About组件的<router-link>标签改为如下：

<router-link class="list-group-item" active-class="active" v-bind:to="{name: 'guanyu'}">About</router-link>

 

 

5 编程式路由导航¶

5.1 <router-link>的replace属性¶

<router-link>的replace属性可以控制路由跳转时操作浏览器历史记录的模式。浏览器的历史记录有两种写入方式，push和replace模式，push是追加历史记录，replace是替换当前记录，路由跳转时候，默认是push。当开启replace时，不可后退到前一条记录。

开启replace的方式是在<router-link>标签中，添加replace属性，并将值设置为true。

<router-link replace="true">Home</router-link>
<!--也可以进行简写：-->
<router-link replace>Home</router-link>

5.2 编程式路由导航¶

上文所述多有实例，都是用用<router-link>来实现跳转，<router-link>标签在解析后都会转化为a标签。但是，在许多场景中，我们需要使用其他标签来实现跳转，例如，点击按钮之后实现跳转。这种情况下，就可以使用组件实例的$router.push和$router.replace两个方法来实现跳转。区别在于$router.push可以在浏览器中进行回退，而$router.replace不能回退。

<template>
    <div>
    	<ul>
    		<li v-for="m in messageList" :key="m.id">
    			<p>{{m.title}} <button @click="showDetail(m.id, m.title)">点击显示详情页</button></p>
    		</li>
    	</ul>
    	<hr>
    	<router-view></router-view>
    </div>
</template>

<script>
    export default {
    	name:'Message',
    	data() {
    		return {
    			messageList:[
    				{id:'001',title:'消息001'},
    				{id:'002',title:'消息002'},
    				{id:'003',title:'消息003'}
    			]
    		}
    	},
    	methods: {
    		showDetail(id, title){
    			this.$router.push({   // 实现push方式跳转
    				name: 'xiangqing',
    				query:{
    					id,
    					title
    				}
    			})
    		}
    	},
    }
</script>

当然，$router也提供了其他功能函数，例如$router.forward和$router.back分别用于操作浏览器记录进行前进和回退，这里不再演示。

5.3 缓存路由组件¶

在一些组件里，存在输入框，当我们输入文本之后，如果进行前进或者后退操作，那么输入框的内容就会被清空。怎么在前进后退操作过程中保留输入记录呢？这就需要使用到缓存路由组件技术了：在父组件模板中用<keep-alive>标签将需要缓存的子组件标签包裹。例如，我们在News组件中添加一些输入框，并输入一些内容，如果需要缓存这些内容，使得后续前进、后退跳转过程中，这些内容依然存在，那么就需要在App组件的模板中，使用<keep-alive>将显示News的<router-view>标签包裹，内容如下：

<keep-alive include="News">
    <router-view></router-view>
</keep-alive>

<keep-alive>中可以使用include属性指定需要缓存的子组件（多个组件用数组指定），也可以不指定，另外，也可以用exclude来指定不需要缓存的组件，如果都不指定，表示缓存内部需要显示的所有子组件。

但是注意，如果点击“About”然后在回到“Home-News”，输入的内容就不再了，因为缓存只针对于Home的子组件，点击“About”然后在回到“Home-News”时，Home组件都已经被销毁再重新实例化，所以输入的内容就不可能存在了。

 

In [ ]: