vue-router路由配置以及页面跳转传参的使用

目录

在src下面新建router文件夹，文件夹下面新建index.js文件配置路由的相关模块：

引入路由页面，导出router配置到main.js全局配置：

router 页面跳转示例（参数可有可无）：

---

在终端安装包：

yarn add vue-router@3.5.1

在src下面新建router文件夹，文件夹下面新建index.js文件配置路由的相关模块：

// 路由-相关模块
import Vue from "vue";
import VueRouter from "vue-router";
// 创建路由规则数组
import Login from "@/views/Login";
import Register from "@/views/Register";

Vue.use(VueRouter);

 // 定义 路由规则 
const routes = [
  {
    path: "/",
    component: () => import("../views/Login"),
  },
  {
    path: "/login", // url的路径，跳转时直接使用这个路径
    name: "login", // 给规则起个名字,router-link路由跳转时使用
    component: Login, // 模块指定
    component: () => import("../views/Login"), // 根据上后面的path路径 所渲染的组件页面
  },
  {
    path: "/register",
    name: "register",
    component: Register,
    component: () => import("../views/Register"),
  },
];

// 创建路由对象-传入规则
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL, // 应用的基路径
  routes,
});

export default router; // 导出router配置到main.js全局配置

引入路由页面，导出router配置到main.js全局配置：

import Vue from "vue";
import router from "./router"; // 路由对象
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

router 页面跳转示例（参数可有可无）：

方法一：绑定点击事件
onClick() {
  this.$router.push({name:'register',params: {id:'10001'}}) 
},

方法二：直接把路由链接写到标签内
<router-link :to="{name:'register', query: {id:10001}}"> 

方法三：直接文字跳转，相当于 a 链接：
<router-link to="/register">注册 </router-link><br>