Vue核心插件 —— Vue Router

最新推荐文章于 2024-07-17 01:22:29 发布

Hayley2016

最新推荐文章于 2024-07-17 01:22:29 发布

阅读量1k

点赞数 1

分类专栏：前端开发 - Vue

本文链接：https://blog.csdn.net/qq_32614411/article/details/81865564

版权

Vue-router之集成

在项目目录新建config文件夹，新建router.js文件（Vue Router入口文件）和routes.js文件（路由配置文件），推荐项目结构

安装Vue Router插件

npm install vue-router -S

在 routes.js文件中配置路由，以下为路由配置基础示例

import Login from '../views/login/login.vue'

export default [
  {
    path: '/login',
    component: Login
  }
]

在router.js文件中编写入口文件代码，示例如下

推荐使用实例1的方式返回Vue Router实例，在服务端渲染的过程中，每次必须生成一个新的Vue Router，使用同一个Vue Router会导致内存溢出。客户端渲染倒是可以用同一个Vue Router，但还是推荐统一用实例1的方式返回Vue Router实例

// 引用vue-router插件
import Router from 'vue-router'
// 使用基础路由配置
import routes from './routes'

// 返回Vue Router实例1
export default () => {
  return new Router({
    routes
  })
}

// 返回Vue Router实例2
// const router = new Router({
//   routes
// })
// export default router

定义好Vue Router的入口文件之后，接下来，要在项目的入口文件（index.js）中使用

import Vue from 'vue'
import App from './app.vue'
import VueRouter from 'vue-router'
import createRouter from './config/router'

Vue.use(VueRouter)

const router = createRouter()

new Vue({
  rout