快速搭建你的第一个vue-router

首先安装vue-router

npm install vue-router

安装之后在index.js里引入vue-router

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App";
import IndexPage from "./pages/index.vue";
import DencitySetModal from "./pages/DencitySetModal.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "hash",
  routes: [
    { path: "/", component: IndexPage },
    { path: "/dencityModal", component: DencitySetModal },
  ],
});

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

在App.vue中：

<template>
	<router-view></router-view>
</template>

使用：

<router-link to="/dencityModal">Go to dencityModal</router-link>
// 或者
router.push('/dencityModal');

可以通过this.$route.params获取传递的参数

以后有想法再继续补充，更多vue-router的API可以查看官方文档https://router.vuejs.org/zh/