vue路由的配置及跳转传参

1.嵌套路由

const routes = [
	{	// 一级路由全称/home
		path: "/home",	// 只有一级路由以/开头
		component: () => import("@/views/home"),	// 按需加载路由
		children: [
			{
				
			},
			{	// 二级路由全称 /home/news
				path: "news",	// 二级路由不能再以/ 开头 或则 /home/news
				component: () => import("@/views/news")
			},
			{	
				path: "news2",	
				component: () => import("@/views/news")
			}
		]
	},
	{
		path: "/",
		redirect: "/home"	// 路由重定向值为path的名称并非组件名称
	}
]

2.动态路由

注意：只有动态路由才有params参数, 当冲突路由组件被切换时l，例如：从/home/ 1跳转到home/2时，组件会被复用所以不会重新触发生命周期函数，可以通过watch来监听$route的变化

export default {
	watch: {
		$route: {
			deep: true,
			handler(val) {
				console.log(val)
			}
		}
	}
}

1. 第一种： 动态路由也可以定义为一个一级路由（普通路由）

const routes = [
	{	// 一级路由只命中一个组件   :id为占位符
		path: "/home/:id",	// /home/1 
		component: () => import("@/views/home"),	
	},
	{	// 路由传入多个params参数
		path: "/home/:id/post/:postId",	// /home/1/post/1 
		component: () => import("@/views/home"),	
	},
]
// vue文件监听路由变化,获取动态参数
export default {
	watch: {
		$route() {
			console.log(this.$route.params)
			// { home: 1, post: 1 }
		}
	}
}

2. 第二种： 动态路由一般都会和嵌套路由结合使用

const routes = [
	{	// 二级路由命中两个组件  /user或/user/userDetail
		path: "/user",		// 不能命中同一组件, 否则陷入死循环
		component: () => import("@/views/user"),	
		children: [
			{
				path: ":id",	
				component: () => import("@/views/userDetail")
			},
			{
				path: "",	// params没有传递Id时, 则重定向到id为1的路由(/user/1)
				redirect: "1"
			}
		]
	}
]

3. 路由组件传参

props为布尔值true，$route.params会被设置为组件属性，类似于父组件通过props进行数据传递

const routes = [
	{	// ?正则匹配表示id可以出现0-1次, 直接输入home不带id一样可以跳转
		path: "/home/:id?",	
		component: () => import("@/views/home"),	
		props: true
	}
]

// .vue文件
export default {
	props: ["id"]
}

props为对象，它会按照原样设置为组件属性，但数据会被写死

const routes = [
	{	
		path: "/home",	
		component: () => import("@/views/home"),	
		props: { id: 123, name: "大力出奇迹", age: 18 }
	}
]

props为函数，函数形参为$route对象，可以同时获取query和params参数

const routes = [
	{	//
		path: "/home",	
		component: () => import("@/views/home"),	
		children: [
			{
				path: ":id",	
				component: () => import("@/views/homeDetail"),
				props: (route) => {
					id: route.params.id,
					name: route.query.name,
					age: route.query.age
				}
			},
		}
	}
]

路由参数params和query的区别：

1. 写法得不同，query 得写法是 用 path 来编写传参地址，而 params 得写法是用 name 来编写传参地址
2. query 在刷新页面得时候参数不会消失，而 params 刷新页面得时候会参数消失，可以考虑本地存储解决
3. query 传得参数都是显示在url 地址栏当中，而 params 传参不会显示在地址栏

4. 声明式路由和编程式路由的区别

1. 声明式路由通过组件标签来跳转

<router-link to="/home">router-link>

<router-link 
	:to="{path: '/home',query: {name : 'sky', age: 18}}"
	tag="div"
>
router-link>

编程式路由跳转

1. this.$router.go() 页面路由跳转 前进或者后退
2. this.$router.push() 会产生历史记录 和是等同的
3. this.$router.replace(‘/’) 不会产生历史记录
   一般使用replace来做404页面 配置路由时path有时候会加 /
   有时候不加,以/开头的会被当作根路径，就不会一直嵌套之前的路径

// 字符串
this.$router.push("/home")
this.$router.push(`/home/${this.id}`)

// 对象并且可以带查询参数  /home?name=sky&age=18
this.$router.push({ 
	path: "/home", 
	query: { 
		name: "sky", 
		age: 18 
	}
})

5. 命名路由

使用场景：编程式路由跳转时，需要指定params时，只能使用命名路由
概念：给路由起个name名
原因：params和path不能同时出现会产生冲突，因为params属于path的一部分，可
以给路由命名name 来代替 path

this.$router.push({ 
	// path: "/home",   报错, 命名路由解决
	name: "home"
	params: {	// id与动态路由命名的占位符有关, 不能随便起
		id: this.id
	},
	query: { 
		name: "sky", 
		age: 18 
	}
})

const routes = [
	{	//
		path: "/home",	
		component: () => import("@/views/home"),	
		children: [
			{
				name: "home"
				path: ":id",	
				component: () => import("@/views/homeDetail"),
				props: (route) => {
					id: route.params.id,
					name: route.query.name,
					age: route.query.age
				}
			},
		}
	}
]

6. 组件内的守卫

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    //离开当前组件时
    this.path = this.$route.path
    next()
  }

7. 动态添加路由

const Home = {
	path: "/home",
	component: import("@/views/home")
}
const secondChild = {
	path: "child",
	component: import("@/views/child")
}
router.addRoute(Home)
// 给路由name为home的一级路由添加二级路由
router.addRoute('home', secondChild)
// 动态删除路由 参数为 路由的name
router.removeRoute('home')