前端之vue3使用vue-router路由插件

vue-router

使用

1.命令行安装(vue3要用版本四)

npm i vue-router@4

2.配置路由文件, 位与src/router/index.js

// 1.第一个参数用来创建路由
// history模式 --- 引入的第二个函数是设置history路由模式
// 若为createWebHashHistory, 则是hash路由模式(路径中带有#)
import { createRouter, createWebHistory } from "vue-router";

import AnswerList from "../components/AnswerList.vue";
import ProblemList from "../components/ProblemList.vue";
import ShareList from "../components/ShareList.vue";
import SolveProblem from "../components/SolveProblem.vue";
import UserMsg from "../components/UserMsg.vue";
// 2.配置组件路由
const routes = [
  // 路由的默认路径
  {
    path: "/",
    redirect: "/shareList",
  },
  // name路由名称,path组件路由的路径,component对应组件
  { name: "answerList", path: "/answerList", component: AnswerList },
  { name: "problemList", path: "/problemList", component: ProblemList },
  { name: "shareList", path: "/shareList", component: ShareList },
  { name: "solveProblem", path: "/solveProblem", component: SolveProblem },
  { name: "userMsg", path: "/userMsg", component: UserMsg },
];

// 创建路由对象
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

3.在 main.js中引入并使用路由

// 引入路由
import router from "./router";

const app = createApp(App);
// 使用
app.use(router);
app.mount("#app");

4.组件中使用

显示区:
keep-alive整个页面缓存

<!--写法一: -->
   <router-view></router-view>

<!--写法二: 所有页面都缓存-->
 <keep-alive>
   <router-view></router-view>
 </keep-alive>

<!--写法三: 指定所有页面都缓存-->
<!-- <keep-alive>-->
<!--   <router-view></router-view>-->
<!-- </keep-alive>-->

跳转区:
①链接式
这里的to用的是路由中的path

    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>

②函数式
在js中

import { useRouter } from "vue-router";

setup(){
	// 使用路由
	const router = useRouter();
	// 使用路由名称跳渲染指定页面
	router.push({ name: "answerList" });
}

路由跳转, 携带query参数

①跳转
方式1:
value只能是基本类型, 不可以是对象

 <router-link
	target="_blank"
	:to="{
	  name: '路由名称',
	  query: {
	    key: value,
	  },
	}"
	>
</router-link>

方式2:
value只能是基本类型, 不可以是对象

router.push({
  name: "路由名称",
  query: {
    key:value
  },
});

②使用参数

import { useRouter } from "vue-router";

setup(){
	const router = useRouter();
	//用router.currentRoute.value.query.key取值
}