vue-router路由配置

提示：未完待续……（请各位大佬指错）

目录 vue-router一、安装二、路由配置1.具体路由页面（xxxx.vue）2.项目所需路由配置声明文件(src/router/index.js)2.全局声明调用（main.js） 三、路由间通信（传参）1.props2.params3.query 注意

---

vue-router

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装

npm安装代码如下（不同vue版本必须安装不同版本的vue-router）

npm install vue-router@3   //vue2
npm install vue-router@4   //vue3

二、路由配置 1.具体路由页面（xxxx.vue）

例：拥有子路由的的一个路由页面示例（Home.vue）

<template>
  <div>
    <h2>Home</h2>
    //嵌套路由跳转
    <router-link active-class="active" to="/home/message"></router-link>
    <router-link active-class="active" to="/home/news"></router-link>
    //路由页面显示
    <router-view></router-view>
  </div>
</template>

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

2.项目所需路由配置声明文件(src/router/index.js) 引入VueRouter引入路由组件创建并暴露router实例对象

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
import Message from "../components/Message";

//创建router实例对象，去管理整个应用中一组一组的路由规则
export default new VueRouter({
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{
                //嵌套路由，此处path前不能有'/'
                    path: 'news',
                    component: News,
                },
                {
                    path: 'message',
                    component: Message,
                }
            ]
        }
    ]
})

2.全局声明调用（main.js）

Vue-router全局调用声明引入代码如下（示例）：

import Vue from 'vue'
import App from './App.vue'
//引入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入项目所编写的路由器（项目单独的router文件夹下的index.js文件）
import router from './router'

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

三、路由间通信（传参） 1.props

//在路由声明处（/router/index.js）
{
	name:"mingzi",
	//path:'detail/:id/:title',
	component:Detial,
	
	//第一种写法，值为对象，所有键值对以props的形式传给Detail组件（接收组件处要有相应的额props接收：props:['a','b']）
	props:{a:'xxx',b:'xxxx'}
	//第二种写法，值为布尔值。为真，则本路由组件把所有接收到的**params**参数以props形式以props的形式传给Detail组件(接收时：props:['id','title'])
	props:true
	//第三种写法，值为函数(Detail组件接收时：props:['id','title'])
	props: route => ({query: {route.query.id,route.query.title}})
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
	props({query:{id,title}}){
		return {id,title}
	}
}

2.params

a.跳转传参

<!-- 跳转路径的对象写法 (推荐使用)-->
//params传参时跳转路径必须为命名路由的name，不能选用path
<router-link 
	:to="{
		name:'xxx',
		params:{id:xxx.id,title:xxx.msg}
	}"
></router-link>

b.接收参数

{{$route.params.id}}
{{$route.params.title}}

3.query

a.跳转传参

<!-- 跳转路径的字符串写法 (不推荐使用，不再赘述)-->
<router-link to="/home/message/detail?id=001&title=msg"></router-link>
//传递的参数为变量时的字符串写法（太麻烦，通常不这么用）：
<router-link :to="`/home/message/detail?id=${xxx.id}&title=${xxx.msg}`"></router-link>			
	
<!-- 跳转路径的对象写法 (推荐使用)-->
<router-link 
	to="{
		path:'/home/message/detail',
		query:{id:001,title:'msg'}
	}"
></router-link>
//传递的参数为变量时的对象写法中：
/*
query:{
	id:xxx.id,
	title:xxx.msg
}
*/

b.接收参数

//直接使用
{{$route.query.id}}
{{$route.query.title}}

注意 嵌套路由在声明时path前一定不能加’/'；在调用时路径一定要包含父的路径（路由未命名时的要求）；params传参时跳转路径必须为命名路由的name，不能选用path；

Vue官方文档：Vue Router