Vue 路由配置

Vue 路由配置

为什么使用路由？

  在项目中创建了 First.vue 和 Second.vue 两个页面，如果按照组件方式进行操作这两个页面，数据固定显示在 App.vue 中，但是我们知道正常项目都是通过不同的 URL 控制显示不同页面。在 SPA(单页面应用) 项目中，也是需要通过不同的 URL 在 App.vue 中显示不同的数据。路由做的是通过 URL 控制哪个页面显示在 App.vue 中的功能/组件。

什么是路由？

   在 Vue 中路由就是控制显示哪个页面，通过路由显示的页面是显示在 App.vue 中的，当更改 URL 后只改变 App.vue 页面中路由部分对应的内容，也就是说通过路由显示时，也是属于局部刷新效果。

注：在 App.vue 中通过 <router-view> 显示路由内容。

1. 安装路由依赖

在 IDEA 中的 Terminal 面板运行命令：cnpm install --save vue-router

说明：--save 表示把添加的依赖写入到 package.json，如果没有 --save 效果上也是可以的，但是加上可以更好的知道项目都使用了哪些组件。

运行成功后会在 package.json 中增加了 router 相关依赖：

2. 新建两个页面

在 src 下新建了 views 文件夹，并在该文件夹下新建了两个 .vue 的页面：

页面一：src/views/First.vue

<template>
    The First Page.
</template>

<script>
    export default {
        name: "First"
    }
</script>

<style scoped>

</style>

页面二：src/views/Second.vue

<template>
    The Second Page.
</template>

<script>
    export default {
        name: "Second"
    }
</script>

<style scoped>

</style>

此时这两个页面是无法直接访问的。

3. 修改 main.js

import { createApp } from 'vue'
import App from './App.vue'


//1.导入路由依赖，安装了vue-router组件后系统自带的依赖
import { createRouter, createWebHistory } from 'vue-router';

//2.导入两个页面
import First from "@/views/First";
import Second from "@/views/Second";

//3.创建路由对象，new VueRouter为上面import设置的名称
const router = createRouter({
    history: createWebHistory(), //没有history，访问URL会有#
    routes:[
        {
            path: '/first',
            component: First
        },
        {
            path: '/second',
            component: Second
        },
    ]
});

//注意use要在mount之前，使用该路由
createApp(App).use(router).mount('#app');

4. 修改 App.vue

必须要有 <router-view/> 否则无法显示路由控制的页面。

<template>
    <div id="app">
        <p>这里是 App.vue 页面</p>
        <!--路由视图-->
        <router-view/>
       <MyComponent name="张三" v-bind:age="15"></MyComponent>
    </div>
</template>

注意：如果 npm run serve 启动运行项目时，出现如下的保存信息：

需要在 vue.config.js 的配置文件中，加入一行 lintOnSave:false，再重新启动项目运行。

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave:false  //添加这一行
});

5. 优化结构

把 main.js 中和路由相关的内容放到一个单独的 js 文件中，这代码更容易维护。在 src 下新建 router 文件夹，在文件夹中新建 index.js。

1、index.js

//1.导入路由依赖，安装了vue-router组件后系统自带的依赖
import { createRouter, createWebHistory } from 'vue-router';

//2.导入两个页面
import First from "@/views/First";
import Second from "@/views/Second";
const routerHistory = createWebHistory();

//3.创建路由对象，new VueRouter为上面import设置的名称
const router = createRouter({
    history: routerHistory,
    routes:[
        {
            path: '/first',
            component: First
        },
        {
            path: '/second',
            component: Second
        },
    ]
});

export default router;

最后一行 export default router 必须将这个配置好的路由信息导出，否则 main.js 无法获取 router 对象。

2、main.js

import { createApp } from 'vue'
import App from './App.vue'

//导入./router/index文件里面配置好的路由
import router from './router/index'

//注意use要在mount之前，使用该路由
createApp(App).use(router).mount('#app');

这样优化之后对于代码维护更加简便。