欢迎光临
我们一直在努力

vue 单页面应用 路由的基础配置

简介

Vue 项目配置主要包管理文件配置/webpack配置/环境配置/路由配置/Vuex配置/借口配置/公共设施配置七个方面,本片文章主要介绍如何在Vue中如何配置router。

基础配置

由于Vue框架由一个或多个单页面构成,在单页面内部跳转并不会重新渲染Html文件,路由可以由前端进行控制,因此可以在项目内部编写路由文件,Vue可以解析文件中的配置并进行页面跳转渲染。

  • 下面为vue-cli为我们自动生成的文件配置
    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue' // 引入 Home 组件
    import About from './views/About.vue' // 引入 About 组件
    Vue.use(Router) // 注册路由
    export default new Router({
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    }, {
        path: '/about',
        name: 'about',
        component: About
    }]
    })

    配置优化

    vue-cli 默认生成的路由文件具有以下缺点:

  • 如果路由存在二级目录,需要添加base属性,否则默认为"/"
  • 默认路由模式是hash模式,携带#标签会和难看,与真是url不符合
  • 页面没有实现按需加在,可以使用 ()=>import 动态引入组件
    下面是优化后的代码:

    /* router.js */
    import Vue from 'vue'
    import Router from 'vue-router'
    // 引入 Home 组件
    const Home = (resolve => {
    require.ensure(['./views/Home.vue'], () => {
        resolve(require('./views/Home.vue'))
    })
    })
    // 引入 About 组件
    const About = (resolve => {
    require.ensure(['./views/About.vue'], () => {
        resolve(require('./views/About.vue'))
    })
    })
    Vue.use(Router)
    let base = `${process.env.BASE_URL}` // 动态获取二级目录
    export default new Router({
    mode: 'history',
    base: base,
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    }, {
        path: '/about',
        name: 'about',
        component: About
    }]
    })
赞(0) 打赏
未经允许不得转载:散人研 » vue 单页面应用 路由的基础配置
分享到: 更多 (0)

评论 抢沙发

5 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏