vue知识掌握（三）vue-router

最新推荐文章于 2022-10-11 15:10:36 发布

weixin_34293059

最新推荐文章于 2022-10-11 15:10:36 发布

阅读量97

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/akun-2017/p/9590126.html

本文介绍了Vue-Router的基本用法及配置选项，包括如何通过不同方式注册路由，以及路由配置项的具体含义，帮助开发者更好地理解Vue-Router的工作原理。

Vue-Router

路由管理器，可以更好的实现单页面的应用开发。

打开目录：src/router.index.js

import Vue from 'vue' 
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

如上在Router里面的routes是一个数组，而我们注册的路由都是由对象的形式加入的，

  {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
      children:[
            {

            }
       ]
    }

这里一般由四个配置参数：

path：路径（这个路径是个虚拟路径，由自己自由定义，默认项目会自动加载根目录'/'）
name: 路由名称，这个配置是可选的，看个人需求。
component: 组件名，来源于上面的引入：import HelloWorld from '@/components/HelloWorld'
children: 子路由注册可选，类似于routes也是数组

路由注册方式一：

在Router外部加引用import，然后import内部注册

如：

import HelloWorld from '@/components/HelloWorld'

   {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }

路由注册方式二：

在component做引入，这样可以实现赖加载

如：

 {
      path: '/v-for',
      name: 'v-for',
      component: r => require.ensure([], () => r(require('../../docs/v-forbegood.md')))
 },

路由注册方式三：

在Router外部创建常量，常量名便是组件名，然后import内部注册

const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')

 {
     path: '/home',
     component: home
 },

转载于:https://www.cnblogs.com/akun-2017/p/9590126.html