vue 路由id_vue router 路由组件

按需加载，头和底，可根据页面需求，是否统一显示头和底：

JavaScript Code复制内容到剪贴板

importVue from'vue'

importRouter from'vue-router'

importAppHeader from'@/components/common/Header.vue'

importAppFooter from'@/components/common/Footer.vue'

importpublishIndex from'@/components/cms/publishIndex'// 发布首页的页面.

importpublishBase from'@/components/cms/publishBase'// 必填项

//按需加载

constuserIndex = r => require.ensure([], () => r(require('../components/user/index')),'userIndex')//首页

exportdefaultnewRouter({

routes: [{

path: '/',

name: 'userIndex',

components: {

header: AppHeader,

main: userIndex,

footer: AppFooter

}

},

{

path: '/cms/index',//用户发布首页，选择类型

name: 'publish',

components: {

header: AppHeader,

main: publishIndex,

footer: AppFooter

}

},

{

path: '/cms/publish-base/:type/:fee',//填写必要信息，type 发布类型，fee是否付费，1不限，2免费

name: 'publishBase',

components: {

header: AppHeader,

main: publishBase

}

},

]

})

如果全部都有头和底则可以直接写成：

JavaScript Code复制内容到剪贴板

exportdefaultnewRouter({

routes: [{

path: '/',

name: 'Main',

component: Main

},

]

})

在路由中传参，如type，fee

1、在组件中获取传参的值 ：

路由：

JavaScript Code复制内容到剪贴板

{

path: '/msg/message-detail/:id',

components: {

main: messageDetail,

footer: AppFooter

}

},

在compoents中获取路由上的参数：

JavaScript Code复制内容到剪贴板

let publishId = this.$route.params.id;

在模板中使用：

JavaScript Code复制内容到剪贴板

$route.params.id

2、在路由上直接添加参数：

XML/HTML Code复制内容到剪贴板

@click="toRouter({path: '/course/lesson-hour',query: {lessonId: item.lessonId}})"

methods: {

toRouter(router) {

this.$router.push(router);

},

取值，模板中取：

JavaScript Code复制内容到剪贴板

$route.query.lessonId

如果这个传递的参数，可有可无，可使用？：

JavaScript Code复制内容到剪贴板

{//新增/修改课时，带id过来

path: '/course/lesson-edit/:id?',

name: 'addLesson',

components: {

main: addLesson

}

},

表示 ，这个id是不确定的，可以有 也可以不要

路由组件，返回上一页：

JavaScript Code复制内容到剪贴板

this.$router.go(-1);

如果直接在模块中写：

XML/HTML Code复制内容到剪贴板

上一步

跳转指定路由：

JavaScript Code复制内容到剪贴板

let id = res.publishId;

this.$router.push('/cms/publish-more/'+ id);

获取当前路由：

JavaScript Code复制内容到剪贴板

console.log(this.$route.path);

页面重新加载 / 重新渲染页面

JavaScript Code复制内容到剪贴板

this.$router.replace('user/index');

美化路由，将#号去掉，路由开始history模式：

这里的base表示请求的url根路径的配置

JavaScript Code复制内容到剪贴板

exportdefaultnewRouter({

mode: 'history',

base:'/test/',

同一个路由，不同参数跳转，页面无变化的解决方法：

JavaScript Code复制内容到剪贴板

mounted:function() {

this.init();

},

watch: {

'$route'(to, from) {

//刷新参数放到这里里面去触发就可以刷新相同界面了

this.init(this.$route.path);

}

},

methods: {

init(urlStr) {

if(urlStr){

let urlStrArr = urlStr.split('/');

this.lessonId = urlStrArr[urlStrArr.length - 2];

this.playerShow =false;

}

关于跳转路由，受前后浏览页面影响，页面总会跑到中间或其他浏览位置：

JavaScript Code复制内容到剪贴板

router.beforeEach((to, from, next) => {

window.scrollTo(0, 0);

next();

})

在main.js中应该是用import引入的router，在引入router之后配置即可

设置将要去往的路由匹配：

JavaScript Code复制内容到剪贴板

constpaths = [

"userGuide",

"userGuide01",

"userGuide02",

"userGuide03",

"userGuide04",

]

// 将要前往的页面中，需要从头开始显示，不记录中间位置

router.beforeEach((to, from, next) => {

if(global.contains(paths,to.name)){

window.scrollTo(0, 0);

}

next();

})

JavaScript Code复制内容到剪贴板

contains(arr, obj) {

// 当前值 是否在指定数组内

vari = arr.length;

while(i--) {

// console.log(typeof(arr[i]));

// console.log(typeof(obj));

if(arr[i] === obj) {

returntrue;

}

}

returnfalse;

},