js文件里获取路由 vue_Vue.js路由

1.设置路由

① 路由map

在main.js中导入vue-router

import VRouter from 'vue-router'

设置全局路由

Vue.use(VRouter)

实例化router

let router = new VRouter({

// 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple

mode: 'history',

routes: [

// 做一个映射表

{

path: '/apple',

component: Apple

},

{

path: '/banana',

component: Banana

}

]

})

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

template: '',

components: { App }

})

②路由视图

在app.vue文件中嵌入


实现效果

路由视图

③ 路由导航

在app.vue文件中,嵌入router-link标签,该标签可以实现a标签的效果

to apple

具体使用:


to apple

to banana

效果:

路由导航

2.路由参数

作用:为页面传递路由参数.

在路由映射表中配置需要传递的参数:

比如:apple页面,我需要传递一个color的参数,可以在path中以:开头设置参数.

path