三、路由传参
1. params 参数
- 如果我们想打开页面就显示首页，需要引入重定向，在
routes中单独配置一个新的对象，path路径为空，redirect为/home。
路由规则redirect属性重定向，redirect属性：进行重定向URL地址。 - 如果输入的网页路径为未配置的路径，此时我们想要显示404页面，则在
routes中配置一个新的对象，添加404路由Error404.vue，*表示未配置的所有路由地址，并将其注册，引入。 - 命名路由：在routes配置中给某个路由设置名称。在跳转路由时，可以根据路由的名称(name)去跳转。
<div class="error404">
<img src="../assets/img/404.jpg" @click="gotoHome">
</div>
export default {
name: "Error404",
methods: {
gotoHome(){
// 回到首页
// replace()方法跳转，不保留历史记录
this.$router.replace('/home')
}
},
};
路由配置：
{
path:'/index',
redirect:'/home' // 重定向到指定的路由
},
{
path:'/city/:id', // 注意：这里的路由需要传一个参数，路由可以传多个参数，如果传多个，后面继续接 /:xx
name:'type',
props:true, // 设置该选项为true，组件可以通过props选项接收路由参数
component:City
},
{
path:'*', // *号，表示匹配不上的所有路由
name:'error404',
component:Error404
}
页面：
<div class="header">
<router-link to="/home">首页</router-link> |
<router-link :to="{name:'type',params:{id:1001}}">南京</router-link>
<router-link to="/type/1002">镇江</router-link>
</div>
<div class="type">
<h2>{{city.city}}</h2>
<!-- <div ref="content"></div> -->
<!-- 办法三 -->
<!-- 通过v-html指令，可以渲染富文本内容（包含html信息的内容） -->
<!-- v-text指令，渲染文本内容 -->
<div v-html="city.content"></div>
</div>
<script>
export default {
name: "Type",
props:['id'],
data() {
return {
city:{
id:0,
city:'',
content:''
},
lists:[
{
id:1001,
city:'南京',
content:`
<ul>
<li>南京的盐水鸭真好吃</li>
<li>南京的夫子庙真好玩</li>
</ul>
`
},
{
id:1002,
city:'镇江',
content:`
<div>
<button>镇江的锅盖面真好吃</button>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F4624999%2Ff%2F899031384.jpg&refer=http%3A%2F%2Fphoto.tuchong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642159563&t=5e1a20043483c392006c12a8dba862b8">
</div>
`
}
]
}
},
methods: {
getData(){
this.city = this.lists.find(r=>r.id==this.id)
}
},
created() {
// console.log('111');
// 因为点击的镇江，南京都在Type这个页面，路由没有跳转，这条created就不会执行。
// 页面没有跳转，组件没有切换，那就要去watch监听，监听谁啊，监听id
// $route返回的是当前路由信息，它里面的params保存的是路由参数
// console.log(this.$route);
// let {params:{id}} = this.$route
// console.log(id);
// this.city = this.lists.find(r=>r.id==id)
this.getData()
},
// mounted() {
// // mounted挂载完成走一遍，watch监听一遍
// // 办法一，上边给个id="content"，把页面的innerHTML，设为this.city.content(这个模板字符串)
// // document.querySelector('#content').innerHTML = this.city.content
// // 办法二，上边给ref="content"，用$refs.content
// this.$refs.content.innerHTML = this.city.content
// },
watch:{
id:{
immediate:true,
handler(){
this.getData()
// document.querySelector('#content').innerHTML = this.city.content
// this.$refs.content.innerHTML = this.city.content
}
}
}
};
</script>
2. query参数
路由地址，采用query传参方式：?参数1=XXX&参数2=XXX
<router-link :to="{name:'news',query:{id:1001}}">十九届六中全会精神</router-link> |
<router-link to="/news?id=1002">LPL第006号选手Uzi复出加盟BLG</router-link> |
<router-link to="/news?id=1003">新版《仙剑奇侠传》路透曝光</router-link> |
<div class="news">
<h2>{{news.name}}</h2>
<div v-html="news.content"></div>
</div>
<script>
export default {
name: "News",
data() {
return {
query:this.$route.query,
news:{
id:0,
name:'',
content:''
},
lists:[
{
id:1001,
name:'十九届六中全会精神',
content:`
<h3>2021年12月10日8时11分，我国在酒泉卫星发射中心用长征四号乙运载火箭，成功将实践六号 05 组卫星发射升空。这次任务是长征系列运载火箭的第 400 次飞行 汪江波摄 / 本刊<h3>
`
},
{
id:1002,
name:'LPL第006号选手Uzi复出加盟BLG',
content:`
<div>
Uzi在微博发文，宣布"我回来了！"
</div>
`
},
{
id:1003,
name:'新版《仙剑奇侠传》路透曝光',
content:`
<div>
95后新人对标胡歌刘亦菲，有胜算？作为仙侠剧的天花板，《仙剑奇侠传》曾陪伴无数人度过一段美好的时光，多年来热度不减，每每有相关消息总会引起网友的热议。此前，网上传出《仙剑奇侠传》翻拍的消息，将启用一批新人演员，如今几位主演的路透图终于释出了。
<br>
<img src="https://inews.gtimg.com/newsapp_bt/0/14307614873/1000">
</div>
`
}
]
}
},
methods: {
getData(){
// 获取路由的query传参
let { query: { id } } = this.$route;
this.news = this.lists.find((r) => r.id == id);
}
},
watch:{
// 深度监视
$route:{
immediate:true,
handler(){
this.getData()
}
}
}
};
</script>
params参数
{
name:'type',
path:'/type/:id',
props:true,
component:Type
}
query参数
{
name:'news',
path:'/news',
component:News
}
插播传送门=>>>Vue Router 的params和query传参的使用和区别（详尽）
3. $router和$route
$router返回的是当前项目中的路由器对象。
$route返回的是当前路由信息。
4. vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vue.config.js 是vue的配置文件，必须创建在demo根目录下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下。
// 引入nodejs内置模块path
let path = require('path')
// 注意：该配置文件中，只能使用commonjs模块化语法
module.exports = {
// 关闭 eslint-loader 语法检查
lintOnSave:false,
// 配置devServer开发服务器
devServer:{
// 端口号
port: 5566,
// 自动打开
open:true,
// 静态资源路径
// 注意：__dirname是nodejs的内置变量，返回的是的当前项目的绝对路径
// contentBase: path.join(__dirname, "static")
},
// 用于配置原生的Webpack配置
configureWebpack:{
// 解析
resolve:{
// 定义路径别名
alias:{
"@c":path.resolve(__dirname,'src/components'),
"@p":path.resolve(__dirname,'src/pages'),
"@a":path.resolve(__dirname,'src/apis'),
"@u":path.resolve(__dirname,'src/utils'),
}
}
}
}
// 导入Home组件
// import Home from '../views/Home.vue' // 这里可以给绝对路径靠谱，但是写错一个都不行熬
// import Home from '@/views/Home.vue'
import Home from '@v/Home.vue'
@符号代表src资源目录，在vue.config.js文件中将路径解析，path.resolve是拼接路径方法。将@c定义为当前绝对路径
@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。
