任何 子路由 都是在其 父路由 的组件中 切换 显示,
不管是多少层的路由嵌套,都是这样的理解,
所以父路由需要有以下两点,二者缺一不可
1 有组件引用
2 组件中有router-view组件
App.vue 是所有组件的父组件,
一级路由相当于 App 的子路由
所有一级路由在App.vue中切换显示
App.vue 中的 router-view 对应 routes 中 一级路由 位置
/ 默认显示 其他切换 显示
Layout.vue 是二级路由的父组件,
所有 二级路 在 Layout.vue中切换显示
Layout.vue 中的 router-view 对应 routes--Layout 中 children路由 位置
/ 默认显示 其他切换 显示
传递参数
name 方式 需要 添加 name配置项
query传参 三种写法
路由中 需要 去掉 /:id 否则会报错 path:'/home',
<router-link :to="{name:'home',query:{id:1}}" />
第一种:this.$router.push({name:'home',query:{id:1,age:2}})
第二种:this.$router.push({path:'/home',query:{id:1,age:2}})
第三种:this.$router.push(`/home?id=1`);
取参 this.$route.query.id
query类似 get,跳转之后页面url后面会拼接参数,类似?id=1,
params只能和name一起用哟 路由中 需要配置 name
路由中 需要 加上 /:id
1 this.$router.push({name:'home',params:{id:1,age:2}})
2 this.$router.push(`/home/id=1`);
//路由配置:
{
path:'/home/:id/:age',
name:'home',
component:W
}
取参 this.$route.params.id
params类似post,跳转之后页面url后面不会拼接参数
const router = createRouter({
// 使用哈希路由模式
history: createWebHashHistory(),
// 路由配置
routes,
// 滚动行为
scrollBehavior (to, from, savedPosition) {
// vue2 x y
// 始终滚动到顶部
return { top: 0 }
}
})
使用location.href=’/url’来跳转,简单方便,但是刷新了页面;
使用history.pushState(’/url’),无刷新页面,静态跳转;
引进router,然后使用router.push(’/url’)来跳转,使用了diff算法,实现了按需加载,减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的,因为vue-router就是用了history.pushState(),
尤其是在history模式下
useRouter() undefined
useRouter执行一定要放在setup方法内的顶部或者其他位置,
不能放在下面setup的函数里面执行,
否则作用域改变useRouter执行是undefined
vue 子路由 路径写/和不写/的差别
子路由写/的时候代表是绝对路径 跳转的时候直接在 跟路径 下跟上子路由
不写/的时候 会进行拼接 在原有路径上跟上新的path路径
因此 子路由 默认路由可以 写 '' 默认拼接 父路由 跟 '/father' 同理
父 '/' '/father'
子 '/' '' '/father' ''
'/father/callback' 'callback'
链接激活时使用的 CSS 类名
根据当前路由 来匹配 是否 active
exact-active-class="active"精准匹配
路由是 /member 只有 /member 的 a 标签才可以 有active class
也可以 less 中 .router-link-exact-active{}
active-class="active" 当前路由开头即可--激活自身 和 上一级
路由是 /member /member开头的 的 a 标签才都可以 有active class
比如 当前路由是 /member /(上一级) 也会 /member/xxx 不会
也可以 less 中 .router-link-active{}
如果比较多 可以在 router--index 中 配置 统一修改
linkActiveClass : 'active'
linkExactActiveClass : 'active'
重点 ***********************************
active-class 模糊匹配 可以匹配自身路由规则 以及其上一级
/member /member / 都可以 vue2中
vue3 中 要求 路由也必须是 嵌套关系 才可以
/member/order
/member/order/123
可以写平级关系 to 跳转即可 但是 不是嵌套 模糊匹配不生效 无法 激活 CSS
所以 做成嵌套关系
/member/order--> 写组件 但是因为有子路由 组件中还需要放置 router-view
但其 仅仅就是一个容器 可以直接通过 render 函数 生成 router-view
这样就无需指定 组件 以及组件中 router-view
{ path: '/member/order', component: {render:()=>{h(<RouterView/>)}} },
children: [
{ path: '', component: MemberHome }, 主页
{ path: ':id', component: MemberDetail }, 详情页
]
形成嵌套关系 访问 /member/order/123 模糊匹配 /member/order 也可激活 CSS
asp/jsp/php 后端开发页面 后端路由
vue-router
默认class
1 默认 router-link-active
.router-link-active{ }
修改 <router-link active-class='xxx'>
全局修改
linkActiveClass=''
linkExactActiveClass=''
.xxx{ }
当前路由 /home/goods
<router-link to='/home' exact-active-class='xxx' />
/home router-link-active
<router-link to='/home/goods' />
/home/goods router-link-active router-link-exact-active
懒加载 component:()=>import('xxxx')
dist 分包 但是没有名字 chunk-hash.js
魔法注释 -- 加名字 -- home-chunk-hash.js
*/
// component:()=>import(/* webpackChunkName: "home-chunk" */ 'xxxx')
路由匹配
一般来说,我们把404路由定义在最后
{
path: '/:pathMatch(.*)*',
name: 'notFound',
component: () => import('./views/404'),
},
进入没定义过的路由,我们都会给他显示404页面
http://localhost/:8081/Ling
http://localhost/:8081/Ling/ha
pathMatch(.*) 为 string
route.params.pathMatch === 'Ling/ha'
pathMatch(.*)*--route.params.pathMatch为数组
route.params.pathMatch ====['ling'] ['ling','ha']
以特定字符串开头的路由匹配
{
path: '/member:id(.*)',
component: () => import('./views/member'),
name: 'member',
},
http://localhost:8081/member
http://localhost:8081/member01 -- route.params.id 01
<router-link to='/home' v-slot="{ href,route,navigate,isActive,isExactActive }" custom>
<div>
</router-link>
移除 tag='div'
其他元素 或者 组件以插槽的形式 插入 外面包裹 a
作用域插槽 传递过来的 属性
href url
route route
navigate 导航函数
isActive,isExactActive boolean 是否匹配 精准匹配
custom 添加后 外层 a 去掉 点击无法 跳转 可以 使用 οnclick='navigate' 实现
router-view
作用域插槽 缓存 与 动画
<router-view v-slot="{ Component }">
<keep-alive> or transition
<component :is="Component" />
</keep-alive>
</router-view>
添加路由
1 直接添加
router.addRoute({})
2 添加子路由 name--father
router.addRoute('name',{})
删除路由
1 添加 name 相同的 替换
2 router.removeRoute('name')
3 const remove = router.addRoute('name')
remove() 删除路由
router.hasRoute() boolean
router.getRoutes() []
router.beforeEach((to, from) => {
无 next
1 return false 不导航
2 return undefined 或者 不写 原计划 导航 next()
3 return ‘/home’
4 return { path:'/home' }
})
数据改变是 同步代码 for (i=0; i<100; i++) { counter.value ++ }
watch
nextTick
等 是 微任务 等 数据同步完成 最后 微任务 执行一次回调即可
history 后端 nginx 解决 刷新 携带数据问题
nginx 配置 try_files /index.html xxxx/home 找不到 最后返回 index.html
location / {
root /user/local/docker/web/gzfsweb/;
# vue router history 模式
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
vue-router
于 2022-11-08 09:30:35 首次发布