router路由、二级路由、默认路由路径、查询参数、传参

$route:路由信息对象，只读对象；
$router:路由操作对象 ，只写对象。

完整路径：window.location.href
路由路径：this.$route.path

默认路由方法1：

使用redirect 重定向默认路由。默认跳转到子路由 “/left/tab1”

export default new Router({
	routes: [{
			path: "/",
			redirect: "/left"
		},
		{
			path: "/left",
			component: left,
			//默认路由也可以用redirect 直接 重定向到子路由
			redirect: "/left/tab1",
			children: [
			 {
				path: "tab1",
				component: tab1
			}, {
				path: "tab2",
				component: tab2
			}]
		},
		{
			path: '/right',
			component: right
		}
	]
})

默认路由方法2：

//如果路径 设置是空，即path: “”.
等于是 默认路径

export default new Router({
	routes: [{
			path: "/",
			redirect: "/left"
		},
		{
			path: "/left",
			component: left,
			children: [{
					//如果路径是空.等于是 默认路径
					path: "",
					component: tab1
				},
				{
					path: "tab1",
					component: tab1
				}, {
					path: "tab2",
					component: tab2
				}
			]
		},
		{
			path: '/right',
			component: right
		}
	]
})

获取路由 URL里面的查询参数

方法1：使用$route.params.id

<router-link to="/left/tab1/1">tab1</router-link>
<router-link to="/left/tab2/2">tab2</router-link>

路由设置：

export default new Router({


	routes: [{
			path: "/",
			redirect: "/left"
		},
		{
			path: "/left",
			component: left,
			children: [{
					//如果路径是空.等于是 默认路径
					path: "",
					component: tab1
				},
				{
					path: "tab1/:id",
					component: tab1
				}, {
					path: "tab2/:id",
					component: tab2
				}
			]
		},
		{
			path: '/right:id',
			component: right
		}
	]
})

展示：
↓在html结构中，$route的前面不能带this

<p>{{$route.params.id}}</p>

方法2：使用props
设置路由：添加props:true

export default new Router({


	routes: [{
			path: "/",
			redirect: "/left"
		},
		{
			path: "/left",
			component: left,
			children: [{
					//如果路径是空.等于是 默认路径
					path: "",
					component: tab1
				},
				{
					path: "tab1/:id",
					component: tab1,
					props:true
				}, {
					path: "tab2/:id",
					component: tab2
				}
			]
		},
		{
			path: '/right:id',
			component: right
		}
	]
})

页面接收id：

<template>
	<div class="a">
		<p>{{id}}</p>
	</div>
</template>

<script>
	export default {
		props:["id"],
		data() {
			return {
				
			}

</script>

URl多参数传递：

<router-link to="/left/tab1/1?name=zhangsan&age=10">tab1</router-link>

获取参数：

<p>{{$route.query.name}}</p>
<p>{{$route.query.age}}</p>

声明式的导航

声明式的导航和编程式的一样，这里就不在过多介绍，给几个例子大家对照编程式理解，例子如下：
字符串

<router-link to="news">click to news page</router-link>

命名路由：使用name、params

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

效果：

查询参数：使用path、query

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

注意：
1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失

案例：
left.vue

<router-link :to="{path: '/left/tab1', query: { name: 'zhangsan'}}">tab1</router-link>

设置路由文件:

export default new Router({
	routes: [{
			path: "/",
			redirect: "/left"
		},
		{
			path: "/left",
			component: left,
			children: [{
					//如果路径是空.等于是 默认路径
					path: "",
					component: tab1
				},
				{
					path: "tab1",
					component: tab1,
					props:true
				}, {
					path: "tab2/:id",
					component: tab2
				}
			]
		},
		{
			path: '/right:id',
			component: right
		}
	]
})

tab1.vue

<p>{{$route.query.name}}</p>

编程式导航

go方法是为了实现前进和后退的，n是一个数值，如果传1表示在历史记录中向前走一位，如果传-1，在历史记录中后退一位，

1、可以给push方法提供一个对象，对象中包含path属性，也指向一个hash地址，

2、可以给push方法提供一个对象，不用path属性，而是name属性，来实现命名路由的导航，同时还可以用params属性传参；

3、可以给push方法提供一个对象，path属性指向要跳转到的地址，通过query属性传递查询字符串，查询字符串会通过问号的形式拼接到url地址的后面去。

使用案例：

this.$router.push({
          path: '/medContent1',
          query: {
            entityId: items.entityId,
            materialsCode: items.materialsCode,
            batch: items.batch,
            type: items.type,
            Openid: items.openId
          }
        })

其中路由规则如下：

{
  path: '/medContent1',
  component: () => import('@/views/medContent/index1')
},

获取参数:

this.$route.query.entityId