vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)

path:"/abc/:id"
router这里的abc路径要与home里面的路径一样,:name类似于参数(一般是id)
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第1张图片
home里面的路径,这里的xm和xh就是传的参数
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第2张图片
最后点击about或者news都是显示出about组件,这并不是报错,按F12键也并没有问题,是因为router里面绑定的是About组件,效果不变
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第3张图片
但是我们可以发现,点击about和News显示的地址是不一样的,这就说明点击是生效的,那为什么同样的效果要传入不一样的地址,就像你登录到京东或者淘宝页面,别人也登录到这里,看到的页面是一样的,但是登录的用户是不一样的,所以要设定不同的路径,于此同时,如果是要登录到同一个页面的话,就没有必要在router.js里面加入两个路径
在这里插入图片描述在这里插入图片描述

this.$route.params.name在about文件里,加入这句话,一般用于发送ajax请求用,这里的.name就是router里面的name(id),这里 $route是根实例里面的东西

vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第4张图片
当我们刷新运行页面,再点击about或者news就可以显示出他是哪个name(id)
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第5张图片

嵌套路由
router-view里面套router-view怎么办?这时候我们就会在router.js配置里面再加个children来表明子路由,而渲染router-view的顺序是从外到里,也就是从父router-view到子router-view
下面还是home.vue里面的router-line地址连接
在这里插入图片描述
这个是about,就是在组件里面再次加组件的地方
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第6张图片
这个是router.js里面写的组件
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第7张图片
点击about,会转换xm和xh字样,点击小明小红就会出现children组件的内容
vue高级4-router嵌套路由(children)、: id、params.id(显示id)、$route.push()、路由重定向(rediect)_第8张图片

$route.push("/abc/xh/posts"):https://blog.csdn.net/u014395524/article/details/88194842
可以加一个button标签,绑定一个函数(button @click=“jump”),函数(jump)内部写this. $router.push("/abc/xh/posts"),也可以实现跳转,在实现生命周期的时候可以用这个方法,router-link是需要点击的时候才会出现router-view,而如果使用函数绑定,加上生命周期mouted之类的就可以实现自动触发运行

而有些时候可能会有多个route,我们会给route命名,routes:{ name:" “, path:” ', component: }
router.push({name:“user”, params:{userid:123}})

路由重定向 redirect:"/def",就在route里面写一个你重新定的路径,就会跳转到相应路径,执行这个路径下的组件

mode:“history” --没有了/#/,后台要配置
不加:在这里插入图片描述
加了:在这里插入图片描述

一个链接对应多个组件 router-view class

home.vue:
click

 (没有写name默认default)



router.js:
{
	path:/ ,
	components:{
		default:foo,
		a:bar
		b:baz
	}
},
{
	path:"/other",
	components:{
		default:foo,
		a:bar
		b:baz
	}
}

你可能感兴趣的:(vue)