Vue路由的使用

原创

wx5c08995b28fc1 2023-06-05 14:22:47 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5c08995b28fc1的原创作品，请联系作者获取转载授权，否则将追究法律责任

安装npm install vue-router --save
构建路由js：src下建文件router,在建index.js如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from "@/components/HelloWorld";
import World from "@/components/World";

Vue.use(Router)
let router = new Router({
    routes: [
        {
            path: '/hello',
            component: HelloWorld
        },

        {
            path: '/world',
            component: World
        },
        {
            path: '/',
            redirect: '/world'
        }
    ]
})

export default router

然后后将router文件夹下的index.js挂在到main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index'

Vue.config.productionTip = false

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

改造一下App.vue：删除多余文件,引入一个视图标签

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {}
}
</script>