Vue路由配置流程: 配置完路由后 , 需要写入到实列内,在App.vue写入 <router-view> 标签进行一级路由配置 ,在components/user.vue写入 <router-view> 进行二级路由配置
路由配置
一. 一级路由配置与路由内方法
语法:
const router = new VueRouter({
routes: [
// 一级路由
{path: '/路径名',component: 组件名 },
// 重定向
{path: ' / ', redirect: '/路径名 ' },
// 404
{path: ' * ',component: 组件名 },
],
})
// 一级路由出口 --> App.vue
<router-view> </router-view>
说明: Vue路由是指根据url 分配对应的处理程序 作用就是url 调用对应的控制器
重定向属性说明: 1. 监测默认路径 path:'/' 2. redirct配置项 值是要强制切换的路由路径
重定向说明: 匹配path后 ,强制跳转path路径 ,网页打开url默认值是 / 路径 ,redirct是设置要重定向到那个路径\
重定向应用场景: 第一次打开网页 配置默认页面
404 : 当找不到路径匹配时 给个提示页面 ,path匹配 * (任意路径)
</router-view>作用: 展示这个页面路由下面的子路由
二. 二级路由配置
语法:
const router = new VueRouter({
routes: [ {
//一级路由
path: '/路径名', component: 组件名,
children: {
// 二级路由
{path: '/路径名',component: 组件名 },
} },
],
})
//配置一级路由出口 --> App.vue
<router-view> </router-view>
配置二级路由出口 --> components/user.vue
<router-view> </router-view>
作用: ;嵌套路由的作用就是让新的页面内容展示子组件的占位符
说明: 二级路由往后 path 直接写名字 , 无需写开头(他会自动拼接)