一. 配置路由规则
const 变量名 = new VueRouter(
{
path:'/路径'
component: '组件名 '
}
)
路由出口
指令路由出口
<router-view> </router-view>
二. 声明式导航
<router-link to="路径"> </router-link>
作用:
1.更方便的实现路由跳转, 不需要想要不要加 #, 还会自动添加高亮的类名
2.自动添加类名 router-link-active 模糊匹配 router-link-exact-active 精准匹配
3.router-link实质上最终会渲染成a链接 to属性等价于提供 a 标签 href属性(to无需#)
说明:
1.router-link是 VueRouter提供的全局组件 本质就是a标签
2.router-link当标签使用 必须传入to属性 指定路由路径值
注意: to属性设置跳转路径
三.声明式导航router-link传参接收
1.query传参
传递
?参数名=参数值
//传递多个参数
?参数名=参数值&参数名=参数值
接收
$route.query.参数名
2.params路径传参
传递
/my/参数值
// 传递多个参数
/my/参数值/参数值
配置
{
path:'/路径/: 参数名'
component: '组件名 '
}
// 传递多个参数配置
{
path:'/路径/: 参数名/: 参数名/'
component: '组件名 '
}
接收
$route.params.参数名