vue router路由

三要素

  • Vue-router三要素:路由map、路由视图、路由导航
  • 路由map指路由与组件的映射关系
  • 路由视图指路由映射对应组件的渲染位置
  • 路由导航指可以使地址栏发生变化的导航链接。

路由map

import Vue from 'vue'
import App from './App'
//1、在入口文件main.js里引入
import VRouter from 'vue-router'
Vue.config.productionTip = false
//2、用全局方法use()来注册使用vue-router
Vue.use(VRouter);
//4、实例化全局router  
let router=new VRouter({
   //以下是路由map
    routes:[
        {
            path:'/apple',
            component:Apple
        },
        {
            path:'/banana',
            component:Banana
        }
    ]
});
new Vue({
  el: '#app',
  router,
  //3、注册组件
  components: { App,VRouter},
  template: '<App/>'
})

路由视图

<router-view></router-view>

相当于一个占位符,匹配到的组件展示到其中去

实例:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/license">License管理</router-link> |
      <router-link to="/user">用户管理</router-link>
    </div>
    <router-view/>
  </div>
</template>

路由导航

方法1:使用 创建 a 标签来定义导航链接

<router-link :to="{path:'apple'}"> to apple</router-link>
<router-link :to="{path:'banana'}">to apple</router-link>

方法2:使用 router.push 方法

router.push({ path: 'apple' })

动态路由

什么是动态路由

  • 静态路由: vue-router不进行参数传递的路由模式
  • 动态路由: vue-router进行参数传递,对应的路由数量不确定,是以冒号为开头的(:),例子如下:
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/RouterComponents/:id',
      name: 'RouterComponents',
      component: RouterComponents
    }
  ]
})

按需加载(路由懒加载)

vue 构建单页面应用,但是问题是随着系统的体积变大,js文件也体积太大了,这时候就需要按需要进行加载了。

介绍三种实现方式:

  • vue异步组件
  • es提案的import()
  • webpack的require,ensure()

vue 异步组件

vue异步组件技术即异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载,这种情况下一个组件生成一个js文件。

/* vue异步组件技术 */
{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
},{
  path: '/about',
  name: 'about',
  component: resolve => require(['@/components/about'],resolve)
} 

路由懒加载(import)

{
  path: '/about',
  component: About
}, {
  path: '/index',
  component: Index
}, {
  path: '/home',
  component: Home
}
// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

webpack提供的require.ensure()

vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */
{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
  path: '/about',
  name: 'about',
  component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×