一、集成安装 vue-router
1.1 新建组件
1.2 安装 npm i vue-router
1.3 配置路由（router->index.js文件）：
- 引入：
import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../views/home.vue'
- 配置：
const router = createRouter({
history:createWebHashHistory(),//路由模式
routers:[
{
path:'/home',
component:Home
}
]
})
- 导出：
export default router
1.4 注入路由（main .js）
import router from './router/index.js'
app.use(router)
1.5 呈现（App.vue）
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
1.6 切换
<router-link to="/home">首页</router-link>
二、动态路由传参（一个参数时候）
2.1 设置形参（router->index.js）
import Detail from '../views/detail.vue'
{
path:'/detail/:id',//设置形参id
component:Detail
}
2.2 传递实参
<div v-for="item in 5" :key="item">
<router-link :to="`/detail/${item}`">动态路由传参{{ item }}</router-link>
</div>
2.3 提取使用
//在路由跳转的目标组件中
<template>
<div>详情页,{{$route.params.id}}</div>
</template>
<script>
export default {
created() {
console.log(this.$route.params);
},
};
</script>
三、query传参（多个参数时候）
3.1 传递实参
<div v-for="item in 5" :key="item">
<router-link :to="`/detail01?name=张三&idx=${item}`">query传参{{ item }}</router-link>
</div>
3.2 提取使用
<template>
<div>
query传参详情页{{$route.query.idx}}
</div>
</template>
<script>
export default {
created () {
console.log(this.$route.query);;
},
}
</script>
四、嵌套路由（子路由配置）
4.1 新建子组件
4.2 配置路由
{
path:'/product',
component:Product,
children:[
{
path:'p1',
component:P1
},
{
path:'p2',
component:P2
},
{
path:'p3',
component:P3
}
]
},
4.3 呈现
<router-view></router-view>
4.4 切换
<ul class="tab">
<li>
<router-link to="/product/p1">产品1</router-link>
</li>
<li>
<router-link to="/product/p2">产品2</router-link>
</li>
<li>
<router-link to="/product/p3">产品3</router-link>
</li>
</ul>
五、编程式导航（替代router-link）及参数传递
通过事件的方式触发路由跳转
<ul class="tab">
<li @click="handleJump('p1')">产品1</li>
<li @click="handleJump('p2')">产品2</li>
<li @click="handleJump('p3')">产品3</li>
</ul>
methods: {
handleJump(target){
// 编程式导航
// this.$router.push(`/product/${target}`)
// 编程式导航及传参
this.$router.push({
path:`/product/${target}`,
query:{
name:'张三',
sex:'女'
}
})
}
},
//子组件提取
<template>
<div>产品1子组件{{ $route.query.name }}</div>
</template>
<script>
export default {
created() {
console.log(this.$route.query);
},
};
</script>
六、路由命名
{
path:'/product',
component:Product,
children:[
{
path:'p1',
name:'my-p1',
component:P1
},
{
path:'p2',
name:'my-p2',
component:P2
},
{
path:'p3',
name:'my-p3',
component:P3
}
]
},
methods: {
handleJump(target){
this.$router.push({
name:`my-${target}`
})
}
},
七、命名视图
使用场景：多个页面需要同一个组件
{
path:'/home',
components:{
default:Home,
foot:Footer
}
},
<router-view name="foot"></router-view>
八、重定向和别名
8.1 重定向
//当访问/的时候自动跳转到/home
{
path:'/',
redirect:'/home'//重定向
},
8.2 别名
path: '/home',
alias:'/',//别名
九、路由模式
9.1 history模式
项目上线的时候，如果后端不协助处理，项目访问会出现404
history:createWebHistory(),
9.2 hash模式
开发跟上线都可以直接使用
history: createWebHashHistory()
十、路由的懒加载
让组件的资源在访问相关的路由的时候再进行加载，不采用懒加载可能会导致首页白屏、首页打开速度慢
{
path: '/contact',
component:()=>import('../views/contact.vue')
},
十一、路由的组合式API
内部没有this
<script>
import {useRoute,useRouter} from 'vue-router'//Hook函数
export default {
setup () {
let route = useRoute()//此route等同于this.$route
console.log(route.query);
let router = useRouter()//此route等同于this.$router
return {}
}
}
</script>
十二、路由404
{
path:'/:pathMatch(.*)*',
component:()=>import('../views/not-find.vue')
}
十三、element-plus组件库
13.1 安装
npm install element-plus //生产依赖[https://element-plus.gitee.io/zh-CN/guide/installation.html]
npm install -D unplugin-vue-components unplugin-auto-import //开发依赖[https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5]
13.2 在vue.config.js中配置
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
},
})
