Vue08/Vue 配置路由规则 、Vue声明式导航、声明式导航传参接收两种方式

一. 配置路由规则

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.参数名

应用场景: 一般都是应用在父路由跳转子路由时 

说明: 携带参数跳转 ，传参方式划分为 query传参 ， params路径传参又可分为浏览器网址中显示参数和不显示参数两种方式