Vue-Router

最新推荐文章于 2024-07-19 14:16:29 发布

修复bug

最新推荐文章于 2024-07-19 14:16:29 发布

阅读量60

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_71349739/article/details/128700188

版权

vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

- 下载router插件

npm install vue-router

- 在main.js中挂载router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";


app.use(router).mount("#app");

- 在src下面新建router文件夹，控制跳转路径

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: () => import("@/views/HelloWorld/HelloWorld.vue"),
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

- 跳转方式：

vue的路由跳转方式分为两种：1. 声明式跳转。2. 编程式跳转。

通常在开发中一般会有路由的懒加载。component => import("文件路径")，使页面加载速度更快。

- 声明式跳转

<router-link to='页面路径'>跳转</router-link>
<router-view></router-view> // 显示的页面容器

- 编程式跳转

<button onClick='toPage'>跳转页面</button>

toPage(){
    this.$router.push('/页面路径')
}

5. 路由传参

- 声明式传参

<router-link to='页面路径?name=zhangsan&age=18'>跳转</router-link>
<router-view></router-view> // 显示的页面容器

b. 编程式传参

牢记：path匹配params，name匹配query

path传参

<button onClick='toPage'>跳转页面</button>

toPage(){
    this.$router.push({
        path: '页面路径',
        params: {
            name: this.name,
            age: this.age
        }
    })
}

name传参

<button onClick='toPage'>跳转页面</button>

toPage(){
    this.$router.push({
        name: 'router文件的name',
        query: {
            name: this.name,
            age: this.age
        }
    })
}