声明式导航(router-link)
-
传参方式:
- to = “/path?参数名=值”
- to = “/path/值”(需在路由规则里配置/path/:参数名)
-
如何接收路由传值?
- $route.query.参数名
- $route.params.参数名
-
优点:
- 1.自定义判断是否要加#
- 2.自动添加类名,方便实现导航高亮
-
用法:
<router-link to = "路径" ><router-link>
Vue重定向
-
示范:
const routes = [ { // 打开网页,默认显示组件 path: "/", // 重定向 redirect: '/find' }, ]
-
重定向一般报错301、302
Vue路由-404页面
-
作用:找不到的路径,页面出现报错提示框
-
配置:
import NotFound from '@/views/NotFound' const routes = [ // ...省略了其他配置 // 404在最后(规则是从前往后逐个比较path) { path: "*", component: NotFound } ]
页面访问地址错误的时候可以直接跳转到UI设计的404图片中
路由模式
-
在创建路由对象时设置
-
hash模式--------
有#
(在地址栏显示) history模式------没有#,但需要后台配合
(在地址栏显示) -
使用方法:
new VueRouter({ routes, mode:’history‘ })
Vue路由-编程式导航-跳转
- 作用:用js代码来进行跳转
-
含义:在创建路由对象时设置
-
如果是用name进行跳转,需要提前给路由规则配置name
-
使用方法:
this.#route.push({ path:'路径' name:'路由名' })
-
传参:
this.$router.push({ path:'路径' name:'路由名' params:{} })
注意事项:如果发使用path跳转,会忽略params
所以推荐组合:path + query ,name + params
Vue路由嵌套
步骤:
-
创建了子路由对应的组件
-
.配置路由规则
{ children:[ //配置规则同一级路由 { } ] } 注意事项:path一般不加/开头
-
在一级路由的组件中添加了一个router-view占位
Vue路由-声明式导航-类名区别
-
路由嵌套之后,他的class有两种,可以分为
-
精确匹配
router-link-exact-active url中hash值路径。与href属性值完全相同,设置此类名。
-
模糊匹配
router-link-active url中hash值 包括href属性值这个路径
-
-
场景: