vue2.0--路由

一、路由的基本加载

1、安装

npm(cnpm) install --save vue-router

2、引用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3、配置路由文件

const router = new VueRouter({
		routes:[{
			path:'/',
			component:HelloWorld
		}]
})
new Vue({
  el: '#app',
  components: { App },
  router,//引入路由
  template: '<App/>'
})

5、视图加载的位置

<router-view></router-view>

但是如果路由很多话放在main.js里会显得main.js文件太庞大，所以我们要在src下创建一个router文件夹，在router文件夹里新建一个index.js文件，将路由放进去，并且可被外部引用。
在 src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import HelloWorld from '../components/HelloWorld.vue'


//export default 可被外部访问
 export default new VueRouter({
		routes:[{
			path:'/',
			component:HelloWorld
		}]
})

在mian.js文件夹里，

import Vue from 'vue'
import App from './App'
import router from './router'//将路由文件 router引入，默认加载index.js


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
	router,//引入路由
  template: '<App/>'
})

这就做到了路由和main.js的分离

二、路由的跳转(router-link)

<template>
	<div class="menuStyle">
		<ul class="ulList">
		
			<!-- 不带参数的两种写法 -->
			<!-- <li @click="currentIndex=index" :class="{actived:currentIndex==index}" v-for="(item,index) in lists">
			<router-link :to="item.path">{{item.title}}
			</router-link></li> -->
			<li @click="currentIndex=index" :class="{actived:currentIndex==index}" v-for="(item,index) in lists">
			<router-link :to={path:item.path}>{{item.title}}
			</router-link></li>
		</ul>
	</div>
</template>

<script>
	export default({
		data(){
			return{
				lists:[
					{path:'/item01',title:'item01'},
					{path:'/item02',title:'item02'},
				],
				currentIndex:0
			}
		}
	})
</script>

三、路由的嵌套
1、children（path不用加斜杠）
2、也要给定显示的位置（router-view）
3、默认展示，路由的重定向（redirect -->路径要写全 ）

<template>
	<div>
		<div>
			<ul>
				<li v-for="(item,index) in dataList"><router-link :to=item.path>{{item.title}}</router-link></li>
			</ul>
		</div>
		
		<div class="box">
		<!-- 师徒展示区域 -->
			<router-view></router-view>
			
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				dataList:[
					{title:'数学',path:'/item03/math1'},
					{title:'语文',path:'/item03/chinese'},
				]
			}
		}
	}
</script>

src/router/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    import HelloWorld from '../components/HelloWorld.vue'
    import Item01 from '../components/Item01'
    import Item02 from '../components/Item02'
    import Item03 from '../components/Item03'
    import Math from '../components/item03/Math.vue'
    import Chinese from '../components/item03/Chinese.vue'
    
    
    
     export default new VueRouter({
    		routes:[{
    			path:'/',
    			component:HelloWorld
    		},{
    			path:'/item01',
    			component:Item01
    		},{
    			path:'/item02',
    			component:Item02
    		},{
    			path:'/item03',
    			component:Item03,
    			name:'item03',
    			redirect:'/item03/math1',//重定向默认展示哪个
    			children:[
    				{
    					path:'math1',//注意此处不加斜杠，自动匹配
    					component:Math
    				},
    				{
    					path:'chinese',
    					component:Chinese
    				}
    			]
    		}]
    })

注意：当页面没有找到路径返回404怎么做？

添加一个404 的组件
在前面匹配不到的时候，* 代表全部，就是都指向404页面

四、路由的传参
1、name 和 params 搭配
（1）在src/router/index.js里这样写入要传的参数名

如果在不写 /:id 的话，页面在刷新完以后值就不保留了

（2）传入参数两种方法
第一种：在router-link 中写入，内部会立刻把 to 的值传到 router.push()。

name是路由文件夹里的name （english）,用到的是params

第二种：this.$router.push() 注意此处是router实例对象


接收方一样用

注意此处是route

2、path 和 query搭配使用
（1）传入参数两种方法
第一种：router-link，内部会立刻把 to 的值传到 router.push()。

第二种：this.$.router.push()

（2）接收参数

3、路由元的传参
//meta方式：路由元信息

export default new Router({
    routes: [
        {
            path: '/user',
            name: 'user',
            component: user,
            meta:{
                title:'个人中心'
            }
        }
    ]
})

接收：

this.$route.meta

$route 和 $router 的区别？
1、route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2、router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

$router.push({path:'home'});

本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

$router.replace({path:'home'});//替换路由，没有历史记录

参考https://router.vuejs.org/zh/api/#replace