Vue2路由问题汇总
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>
六:当前路由激活时状态设置
//使用方法
const router = new VueRouter({
linkActiveClass: 'active',//激活时添加的类名:active
routes
})
更多推荐
已为社区贡献7条内容
所有评论(0)