vue中路由的基本使用

1.老规矩—>安装 引用 应用

//安装
npm install vue-router

//在main.js中引入并使用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2.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'

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

其中component属性可以这样写（懒加载的方式加载组件)

component: () => import('../views/emp/EmpAdv.vue')

3.然后再main.js中引入,并且给Vue添加到router属性

//引入路由器
import router from './router'
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

4.路由准备好之后,使用router-link标签作为导航跳转路由 active-class="active"标识激活时高亮显示，to则表示要跳转的路由

<!-- 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>

跳转路由还可以在方法中调用
this.$router.push('/about') (保存上一步痕迹)
this.$router.replace('/about') (替换上一步痕迹)

5.在呈现的容器中加上router-view标签

<!-- 指定组件的呈现位置 -->
<router-view></router-view>

---

参数：

• 路由跳转带(query)参数

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

读取：{{$route.query.title}}

• 路由跳转带(params)参数,有个前提就是 路由配置项path要加上要添加的params对应的属性path:'detail/:id/:title',

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

跳转路由并携带params参数，to的对象写法

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

读取：{{$route.params.title}}

路由配置项props

{
name:'xiangqing',
path:'detail',
component:Detail,

//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
// props:{a:1,b:'hello')

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

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

在组件中读取props:['id','title'],