vue从入门到放弃之------详细介绍Vue Router的使用

最新推荐文章于 2023-04-05 15:25:25 发布

愚舜

最新推荐文章于 2023-04-05 15:25:25 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： vue javascript

本文链接：https://blog.csdn.net/first_shun/article/details/113144973

javascript 同时被 2 个专栏收录

47 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了VueRouter的基础使用方法，包括安装、配置路由、页面导航及路由信息获取等关键步骤。

一、VueRouter是什么

Vue Router是vue.js的官方路由管理器，包含有很多的功能和vue.js相互集成，供大家使用，下面我们来简单说说Vue Router的使用.

二、VueRouter的安装

npm install vue-router

三、VueRouter的使用

1、引入vueRouter

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2、使用vueRouter

<1>、定义路由模块并导出该模块

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  {
    path: "/",
    name: "Home",
    component: Home
  },
});

export default router;

<2>、挂载到根实例

import router from "./router";
new Vue({
  router,
}).$mount("#app");

<3>、在页面中的渲染

<div> 
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>

四、VueRouter的访问

可以通过this.$route或者this.$router访问当前的路由信息

export default {
  computed: {
    username() {
      //通过this.$route访问路由信息
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      //通过this.$router访问当前的路由信息
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

上述是关于VueRouter的基本使用，如有其它相关操作，请参考官网。

2021 Be nice to me.