前端学习vue：12.Vue引入路由配置及路由传参

路由就是管理页面的关系。

以前用一个a标签就可以跳转，在vue里推荐使用路由的方式管理。

通过 vue-router路由管理页面之间的关系。

Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js 构建单页应用变得轻而易举。

一个项目就一个页面也可以跳转，用路由。

在Vue中引入路由

第一步：安装路由 npm install --save vue-router.

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
PS C:\Users\Administrator\vue-demo1> 

安装成功后。

第二步：配置独立的路由文件。

在src目录下创建 router文件夹然后在下面创建 index.js文件

component:HomeView和 component: ()=> import("../views/aboutView.vue") 的区别是 后者用到了才会被引入，前者一上来就import了会增加不必要的开销。一般对首页加载要求速度要快一些会使用第一种方式直接import在上面引入。

配置路由路径,

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"

import HomeView from "../views/HomeView"

import AboutView from "../views/AboutView"

// 配置信息中需要页面的相关配置。

const routers = [

    {

        path:"/",

        // component 配置对应哪个组件

        component:HomeView

    },

    {

        path:"/about",

        component:AboutView

    }

]

 

const router = createRouter({

    // 访问方式

    history:createWebHistory(),

    routes

})

// 让外部可以访问 把它设置导出

export default router;

第三步 引入 加跳转：

区别看路径。

在path里跟冒号:和key。

跳转的时候/内蒙，是对应给name传递的值。

第三步在跳转后的页面，通过router获取路由参数值：