1.路由器 router
路由组件放在views或pages文件夹下,一般组件放在components文件夹下
切换路由后,只有当前激活的路由组件为挂载状态,其他路由组件是销毁状态
- 由路由工作模式history和路由规则routes组成
- 路由规则会有一个redirect属性,符合当前路由时,重定向到其他路由
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(), //工作模式
routes: [
{
path: '/login',
name: 'login',
component: Login
}
]
})
export default router
2.路由工作模式
- hash
- 优点:兼容性强
- 缺点:url中带有#,不美观,SEO优化方面相对较差
- history
- 优点:url美观
- 缺点:部署上线,需要服务端配置处理路径
- nginx服务配置:
3.路由插入位置
- 使用RouterView标记
4.路由跳转组件
RouterLink 页面跳转默认是push模式,加上属性replace,为替换模式
- RouterLink
// 第一种写法:字符串式
<router-link to="/home" active-class="selectStyle"></router-link>
// 第二种写法:对象式
<router-link :to="{path:'/home'}" active-class="selectStyle"></router-link>
<router-link :to="{name:'home'}" active-class="selectStyle"></router-link> // 命名路由
5.路由传参
query传参
- 传递参数
// 第一种写法:字符串式
<router-link to="/detail?a=123" active-class="selectStyle"></router-link>
// 第二种写法:对象式
<router-link :to="{path:'/detail',query:{a:123}}" active-class="selectStyle"></router-link>
<router-link :to="{name:'detail',query:{a:123}}" active-class="selectStyle"></router-link> // 命名路由
- 接收参数
<div>{{route.query.a}}</div>
import {useRoute} from 'vue-router'
let route= useRoute() // route是一个proxy对象
params传参
1.参数需要在路由规则中提前占位;
2.参数不支持数组,对象格式;
3.跳转时需要使用命名路由方式跳转(路由中的name配置项);
4.参数非必传是后面加?; path: ‘/detail/:a?’
- 参数需要在路由规则中提前占位,如a
{
path: '/detail/:a',
name: 'detail',
component: Detail
}
- 传递参数
// 第一种写法:字符串式
<router-link to="/detail/123" active-class="selectStyle"></router-link>
// 第二种写法:对象式
<router-link :to="{name:'detail',params:{a:123}}" active-class="selectStyle"></router-link>
<router-link :to="{name:'detail',params:{a:123}}" active-class="selectStyle"></router-link> // 命名路由
- 接收参数
<div>{{route.params.a}}</div>
import {useRoute} from 'vue-router'
let route= useRoute() // route是一个proxy对象
6.路由的props配置
- 写法一:
将路由收到的所以params参数当成props属性传递给路由组件,路由组件就可通过defineProps接收
{
path: '/detail/:a',
name: 'detail',
component: Detail,
prop:true
}
- 写法二:
函数式默认有参数route,可以自己决定把那些数据作为props属性传递给路由组件
{
path: '/detail/:a',
name: 'detail',
component: Detail,
prop(route){
return route.query
}
}
- 写法三(对象写法,无法动态,仅了解):
{
path: '/detail/:a',
name: 'detail',
component: Detail,
prop:{
a:100
}
}
7.编程式导航
useRouter,与to的写法是一样的,
import {useRouter} from 'vue-router'
const router = useRouter()
router.push('/login') // 字符串写法
router.push({path:'/detail',query:{a:123}}) //对象写法