vue引入vue-router

Vue路由（router）的安装和使用

安装vue-router插件

第一步：在CMD窗口中，使用命令跳转到vue的安装路径下
第二步：输入命令：npm i vue-router@3
vue2 要安装 vue-router3

npm i vue-router@3

vu3 要安装 vue-router4

npm i vue-router@4

第三步：出现added 1 package in 2m表示安装成功

vue-router配置环境

第一步：在main.js文件中导入vue-router命令：import VueRouter from 'vue-router'
第二步：使用命令Vue.use(VueRouter)
第三步：添加配置项，添加新的文件夹router，在router文件夹中添加index.js文件，并导入在main.js文件中：import router from './router/index'
注意：router文件夹中的index.js文件在导入时，可以省略不写index：import router from './router'

   

如何使用路由

单级路由

在router文件夹中添加index.js文件，输入命令（使用路由需要先导入组件）

注意：导入路由的组件，最好和普通组件有所区分，建议创建一个pages文件夹用来存放路由组件

//index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [{
        path: '/Index',
        name: 'Index',
        component: () => import('../pages/home/index'),
    },
    {
        path: '/homeB',
        name: 'homeB',
        component: () => import('../pages/home/B'),
    },

];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }
})

export default router;

//app.vue
<template>
    <div class="hello">
        <div class="btn">
            <router-link to="/Index">Index</router-link>
        </div>
        <div class="btn">
            <router-link to="/homeB">home B</router-link>
        </div>
        <router-view></router-view>

    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        }
    }
</script>

// index.vue，homeB.vue内容简单修改即可
<template>
    <div>
        <h2>A</h2>
        <ul>
            <li>Index</li>
            <li>home B</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name : 'Index'
    }
</script>

<router-link to=""></router-link>与<a href=""></a>
在vue文件中，router-link 标签是用来代替 a 标签的
router-link 标签最终编译之后的还是 a 标签。vue-router 库帮助我们完成的
<router-view></router-view>：路由组件显示的位置，router-view 标签只是一个占位符
注意：路由组件在进行切换的时候，被切换的组件会被销毁。