一.路由的基本配置方式
1.要点总结
1) 流程（了解）
1> 在文件夹router中存在一个index.js文件，该文件中进行路由的管理对象的创建和导出
2> 在入口文件main.js文件中将路由管理对象导入并注册插件（使用应用实例注册插件需要写在挂载容器的语句前面）
2) 路由模式
1> history模式：history: createWebHistory(import.meta.env.BASE_URL);
1>> 这种写法在地址栏显示：/一级路由/二级路由/.....
2> hash模式：history: createWebHashHistory(import.meta.env.BASE_URL);
1>> 这种写法在地址栏显示：/#/一级路由/二级路由/....
2.代码解析
router/index.js文件：
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routeConfig';-----------导入路由配置表（抽离出的配置表存储的文件地址）
const router = createRouter({-----------------创建路由管理对象
路由模式：以下两种模式二选一即可，一般选择history
history: createWebHistory(import.meta.env.BASE_URL);---------------history模式
history: createWebHashHistory(import.meta.env.BASE_URL);----------hash模式
routes-------------注册路由配置,由routes:routes;缩写而来，原本的直接写在这里路由配置表抽离出来新建一个js文件存放，然后导入该文件，在这里注册（原因是路由配置表的内容比较长，放在这里不利于统一管理）
})
export default router----------导出路由管理对象
main.js入口文件：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';-------------导入路由管理对象
const app = createApp(App)
app.use(router);------------------注册路由插件, 任何一个组件都可以通过组件实例调用this.$router方法获取该路由管理对象
app.mount('#app')
二.路由配置表的抽离
1.步骤总结
1） 步骤
1> 新建一个js文件将所有需要添加路由规则的组件导入该文件
2> 新建一个空数组然后导出，在该数组中依次为组件添加路由规则
3> 在原本的路由配置文件中导入该js文件，并注册路由配置表
2） 语法：（一条路由规则包含三个键值对）
1> path:"/路由地址"（开头必须是"/"，不同于文件路径地址）
2> name:"路由地址的别名"（是一个字符串）
3> component:路由地址对应的组件
1>> 组件懒加载写法：component:()=>import("组件路径")（使用懒加载写法则配置表js文件不用导入组件）
2>> 懒加载写法是一种优化写法，直接在component后面写组件名，相当于将所有组件打包至一个js文件，只要一个组件加载出问题，路由就加载不了，懒加载写法使用动态导入，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效
2.代码解析
import HomeView from '../views/HomeView.vue';------------导入组件
import AboutView from '../views/AboutView.vue';
export default [ ---------------------导出路由配置表
{----------------------一个对象就是一条路由规则
path: '/home', -------------------------路由地址
name: 'home',-----------------------------路由地址的别名
component: HomeView ---------------------------路由地址对应的组件
},
{
path: '/about',
name: 'about',
component: ()=>import("../views/AboutView.vue")
}
]
三.路由的导航方式
标签式导航
1.要点
1） 标签式导航, 借助RouterLink组件跳路由，应用面较小，不常用
2） RouterLink双标签 是vue-router库提供的专门用于跳路由的组件, 它最终会渲染成a标签, to属性的值是路由地址
3） 语法
1> to属性：to="/路由地址"
1>> to属性首先切换地址栏的路由地址，然后由该地址到配置表匹配相对应路由地址的组件并渲染
2> 路由渲染标签添加高亮的语法（css）：a.router-link-active{样式}
2.代码演示
<script>
export default {
methods:{
handleClick(){
this.$router.push('/home');--------------------this.$router是获取路由管理对象的方法
},
handleClick2(){
this.$router.push('/about');
}
}
}
</script>
<template>
<header>
<div class="wrapper">
<nav>
<RouterLink to="/home">Home</RouterLink>-----------标签式导航, 借助RouterLink组件跳路由,to="/路由地址"
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView /> ---------------------也可以写成<router-view />，这是vue框架允许的写法，vue中所有的驼峰命名法标签都可这样改写
</template>
<style scoped>
a.router-link-active{------------------路由渲染标签添加高亮的语法
color: red;
font-weight: bold;
}
</style>
编程式导航
1.要点
1） 编程式导航：借助js代码跳路由, 这种跳路由的方式较为灵活( 可以在事件处理函数,条件语句,请求的回调函数中调用 )
2） 语法：
1> 组件实例方法
1>> $router：组件实例获取当前项目路由对象的方法通常为：this.$router
2> 路由对象跳转路由的方法
1>> push：this.$router.push('/路由地址')
2>> go：this.$router.go('/路由地址')
2.代码演示
<script>
export default {
methods:{
handleClick(){
this.$router.push('/home');------------this.$router 路由管理对象
},
handleClick2(){
this.$router.push('/about');---------------this.$router 路由管理对象
}
}
}
</script>
<template>
<header>
<div class="wrapper">
<nav>
<button @click="handleClick">Home</button>
<button @click="handleClick2">About</button>
</nav>
</div>
</header>
<router-view /> 或 <RouterView />
</template>
<style scoped>
a.router-link-active{
color: red;
font-weight: bold;
}
</style>
四.路由的不同级别
要点总结
1.要点总结
1） 路由
1> 一级路由：一级路由的切换时切换整个页面
2> 嵌套路由：嵌套路由又包括二级路由、三级路由等，嵌套路由的切换是页面局部切换
1>> 添加嵌套路由的语法：children:[{嵌套路由规则},{嵌套路由规则},.....]（该语句在需要添加嵌套路由的路由规则中写）
3> 注意：
1>> 同级路由是互斥的，一次只能匹配并渲染一个
2） 重定向路由规则（为了解决刚打开页面时默认的"/"路由地址在设定的路由地址中匹配不到，引起的插件警告问题）
1> 语法：
{
path: '/',
redirect: '/希望指向的目标组件的路由地址'
}
2> 注意：如果重定向指向的路由地址存在嵌套路由，那么也需要设置嵌套路由的重定向，否则页面刚打开时渲染不全。
3） 404路由：写在路由规则最后面（404路由可以不用每层都加）
{
path: '/:error(.*)',（这里的括号内符号含义为多个任意字符（元字符.），表明多个任意字符只要不能匹配前面给定的路由规则中的地址）
component: NotFound
}
2.代码总结
导入需要添加路由规则的组件
import Index from '../views/index/index.vue'
import Login from '../views/login/login.vue'
import City from '../views/city/city.vue'
import Detail from '../views/detail/detail.vue'
import NotFound from '../views/notfound/index.vue'
import Home from '../views/index/home/home.vue'
import Cate from '../views/index/cate/cate.vue'
import Gwc from '../views/index/gwc/gwc.vue'
import Mine from '../views/index/mine/mine.vue'
export default [
{
path:'/index',
name:'index',
component: Index,
children:[ ----------------------嵌套路由添加在上一级路由规则里面
{
path:'/index/home',
name:'home',
component: Home,
},
{
path:'/index/cate',
name:'cate',
component: Cate,
},
{
path:'/index/gwc',
name:'gwc',
component: Gwc,
},
{
path:'/index/mine',
name:'mine',
component: Mine,
},
{
path:'/index',
redirect:'/index/home'---------------------二级路由的重定向，如果存在嵌套路由，也必须设置重定向，否则页面会存在加载不全的问题
},
{
path: '/:error(.*)', ---------------------404路由，写在所有路由规则的末尾
component: NotFound
}
]
},
{
path:'/login',
name:'login',
component: Login
},
{
path:'/city',
name:'city',
component: City
},
{
path:'/detail',
name:'detail',
component: Detail
},
{
path: '/',
redirect: '/index' ----------------一级路由重定向
},
{
path: '/:error(.*)', ----------------------404路由
component: NotFound
}
]
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
