Vue2路由问题汇总

Vue2路由问题汇总

一：在main.js文件里配置了路由，可是页面不生效问题

1.没有设置路由的入口，需要在app.vue里设置路由的入口router-view

<template>
  <div id="app" class="container">
     <router-view v-wechat-title="$route.meta.title"></router-view>
  </div>
</template>

二：动态路由匹配的问题

1.注意一下vue2与vue1动态路由匹配的写法区别

//vue2动态路由匹配的写法区别
	const routes =[
		{
		    path: '/goods',
			component: goods
		},
		{
			path: '/ratings',
			component: ratings
		},
		{
			path: '/seller',
			component: seller
		}

	];
	const router = new VueRouter({
	  	routes
	});
	new Vue({
	  el: '#app',
	  router,
	  render: h => h(App)
	});

	//vue1动态路由匹配的写法区别
	let router = new VueRouter({});
	router.map({
		'/goods': {
			component: goods
		},
		'/ratings': {
			component: ratings
		},
		'seller': {
			component: seller
		}
	});
	router.start(app, '#app');

三：路由地址包含有#的问题

1.vue-router默认hash模式,需要设置 mode: 'history'，同时还需要在后台进行配置，详情请看vue-router 2中文手册的HTML5 History 模式

四：嵌套路由问题

1.上一级的路由必须设置路由入口router-view

//写法1：
	import Vue from 'vue';
	import VueRouter from 'vue-router';
	import VueResource from 'vue-resource';
	................
	import frame from 'components/frame.vue';//设置路由入口
	import goods from 'components/goods/goods.vue';
	import ratings from 'components/goods/ratings.vue';
	import seller from 'components/goods/seller.vue';
	-----------------------------------------------------
	//并且配置路由器规则
	const routes =[
		{
			path:'/goods',
			component: frame,
			children: [
				{ path: '/',component: goods},
				{ path: 'ratings',component:ratings}}
			]
		},
		'seller': {
			component: seller
		}
	];
	const router = new VueRouter({
	  	routes
	});
	-----------------------------------------------------
	//frame.vue文件：
	<template>
	  <div class="routes">
	      <router-view></router-view>
	  </div>
	</template>

	//写法2：
	import Vue from 'vue';
	import VueRouter from 'vue-router';
	import VueResource from 'vue-resource';
	................
	import goods from 'components/goods/goods.vue';
	import ratings from 'components/goods/ratings.vue';
	import seller from 'components/goods/seller.vue';
	-----------------------------------------------------
	//并且配置路由器规则
	const routes =[
		{
			path:'/goods',
			component: goods,
			children: [
				{ path: 'ratings',component:ratings}}
			]
		},
		'seller': {
			component: seller
		}
	];
	const router = new VueRouter({
	  	routes
	});
	-----------------------------------------------------
	//goods.vue文件必须含有：
	<router-view></router-view>

五：设置网页title的问题

1.使用vue-wechat-title插件:npm install vue-wechat-title

//使用方法
	//1、头部引入该插件
	import VueWechatTitle from 'vue-wechat-title';
	//2、在路由中配置meta值
	const routes =[
		{
			path:'/shop',
			meta: {title: '我的店铺'},
			component: shop
		}
	];
	const router = new VueRouter({
	  	routes
	});
	//3、在页面中添加v-wechat-title
	<router-view v-wechat-title="$route.meta.title"></router-view>

六：当前路由激活时状态设置

1.在设置路由中设置linkActiveClass

//使用方法
	const router = new VueRouter({
		linkActiveClass: 'active',//激活时添加的类名：active
	  	routes
	})