1.路由参数的查询：
类似像地址上出现的这种:http://localhos:8080/page?id=1&love=linlin
// 🍊src/router/index.js
import Vue from "vue";
//1、导入 vuerouter
import VueRouter from "vue-router";
//2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
//3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
mode:"history",
routes:[
//🔮类似像地址上出现的这种:http://localhos:8080/page?id=1&love=linlin
{
path:"/page",
name:"page",
component:()=>import("@/views/Page")
},
{
path:"/user-*",
component:()=>import("@/views/User-admin")
},
{
path:"*", //异步加载组件
component:() => import("@/views/404")
}
]
})
- 🍊路由参数的查询query：
<router-link :to="{name:'page',query:{id:1008,name:'Linlin'}}">,这里是query哦~！！！
// src/views/App.vue
<template>
<div id="app">
<div id="nav">
<!-- 使⽤router-link组件来导航 -->
<!-- 通过传⼊to属性指定连接 -->
<!-- router-link默认会被渲染成⼀个a标签 -->
<router-link :to="{name:'home'}">首页</router-link>
<router-link :to="{name:'about'}">关于我</router-link>
<!-- query现在是写死的，将来项目里是一些动态的值 -->
<router-link :to="{name:'page',query:{id:1008,name:'Linlin'}}">我是page页面啊</router-link>
<!-- 路由组件的出口 -->
<router-view></router-view>
</div>
</div>
</template>
- 🍊通过
const { id, love } = this.$route;解构赋值拿到查询的参数
//src/views/page.vue
<template>
<div>
<h2>我是page页面啊</h2>
</div>
</template>
<script>
export default {
created() {
const { id, love } = this.$route;
console.log('我是page页面的love', love); // 🤪Linlin
console.log('我是page页面的id', id); // 😆1
},
};
</script>
<style scoped>
</style>
2.重定向和别名:
- 🍊重定向： 在路由对象中配置好
path后，添加redirect属性，如：redirect:/page,或者redirect:{name:"page"} - 🌵别名（alias）： 就相当于给路由起了个小名字,如
alias:"/love"，这样就可以在页面访问/love路径的时候，渲染相应的组件了。
import Vue from "vue";
//1、导入 vuerouter
import VueRouter from "vue-router";
//2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
//3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
mode:"history",
routes:[
//🍊这里是重定向
{
path:"/",
// redirect:"/page",
redirect:{name:"page"}
},
{
path:"/",
name:"home",
component:Home
},
{
path:"/about",
name:"about",
component:About,
alias:"/love" //🤪alias给路由起别名，当我匹配到love的时候，会匹配到about这里
},
]
})
