vue 多种路由实现方式和总结

前言：Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

1、安装：

推荐使用npm安装：（淘宝镜像）
npm install vue-router

2、定义组件，这里使用从其他文件import进来：

例如：
import index from ‘./components/index.vue’
import test from ‘./components/test.vue’

3、创建 router 实例，定义路由：

//简单举例
const router = new Router({
    routes: [{
            path: '/index',
      		name: 'index',
      		component: index,
      		meta: {
        		keepAlive: true ,  //是否需要缓存
        		title: '首页'
      		}
        },
    }]
})

4、常见的几种写法如下：

（1）、 上面列子常见写法（性能一般）：

（2）、 重定向 redirect：

const router = new Router({
	routes : [
		 { path: '/', redirect: '/index'},  // 这样进/ 就会跳转到/index
		 { path: '/index', component: index }
	]
})

（3）、 嵌套路由（常见）：

const router = new Router({
	 routes : [
	 	{ 
	 	path: '/index', component: index,
	  	children: [
	   		{ path: 'test', component: test}
	   	]
	]
})

（4）、路由懒加载（性能较优，推荐使用）：

//这种方式最好  而且代码会比较整洁不会看起来很乱

const router = new Router({
    routes: [
		 { path: '/index', component: resolve => require(['./index.vue'], resolve), meta: { title: 'XXXX' }},
		 { path: '/test', component: resolve => require(['./test.vue'], resolve), meta: { title: 'XXXX' }},
	]
})

（5）、包含嵌套路由、懒加载的路由（性能较优，推荐使用）：

//这种方式最好  而且代码会比较整洁不会看起来很乱

const router = new Router({
    routes: [
		 { path: '/index', component: resolve => require(['./index.vue'], resolve), meta: { title: 'XXXX' }},
		 { path: '/test', component: resolve => require(['./test.vue'], resolve), meta: { title: 'XXXX' }
		 	children:[
   				{ path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
  			]
		 },
	]
})

以上是自己归纳路由的多种方法，还需要很多改善地方评论可以点出哟~