声明式导航-跳转传参数
1.查询参数传参
语法:to ''/path?参数名=值''
2.对应页面组件接受传来的值
''$router.query.参数名''
2.动态路由传参
1.配置动态路由
2.配置导航连接
to=''/path/参数值''
3.对应页面组件接收传递过来的值
#route.params.参数名
多个参数传递:查询参数的方式
动态路由参数可选符,在动态路由后面加?表示参数可传可不传
结果对比
有参
无参
网页重定向
Vue路由-404
1.在views组件中创建404组件
404
<template><div><h1>404NotFound</h1></div>
</template><script>export default {}</script><style></style>
2.在路由器中导入组件并匹配路由
路由设置
设置history
编程式基本跳转
1.路径跳转
path路径跳转
this.router.push
<template><div><p>我的朋友灰灰</p><p>我的朋友白白</p><!-- 将刚刚的声明式导航进行传递值 --><p>{{$route.query.key}}</p><p>{{$route.query.age}}</p><button @click="goinfo">跳转info</button></div></template><script>export default {methods:{goinfo(){// 通过router跳转this.$router.push('/info')}}}</script><style></style>
点击
name命名路由跳转