Vue2 配置、使用路由vue-router

最新推荐文章于 2025-01-17 16:18:52 发布

原创最新推荐文章于 2025-01-17 16:18:52 发布 · 1.5k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript #npm #前端框架

参考文档：https://v3.router.vuejs.org/guide/essentials/named-views.html#nested-named-viewshttps://v3.router.vuejs.org/guide/essentials/named-views.html#nested-named-views注意安装版本问题，npm install vue-router 默认版本4.x 对应 Vue3路由配置

一、安装

Vue2 对应 Vue Router版本 3.x

npm install vue-router@3.0.0

二、在src文件下创建 scr/router/index.js 文件

import Vue from "vue";

import VueRouter from "vue-router";

Vue.use(VueRouter);


const router = new VueRouter({

  routes: [
    {
      path: "/",
      name: "Login",
      component: './login.vue',
    },
    {
      path: "/home",
      name: "Home",
      component: Index,
    }
  ],
});

// 将路由实例导出
export default router;

三、在main.js注入路由

import Vue from 'vue'
import App from './App.vue'

import router from '@/router/index.js' // 引入路由文件

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

四、在App.vue根组件中添加router-view

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p class="switcher">
      <router-link to="/">Go to Login</router-link>
      <!-- <router-link to="/home">Go to home</router-link> -->
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 100%;
  height: 100%;
  margin: 0px;
}
</style>