- 安装vue-router
npm install vue-router --save
- 在main.js(应用的入口文件)中写入以载入vue-router
import Vue from 'vue'
import routes from './vue-router/vue-router-config.js'
import vue-router from 'vue-router'
Vue.use(vue-router)
const router = new VueRouter({
routes:routes
})
new Vue({
el:'#app',
router:router
})
- 新建一个 vue-router文件夹 并编辑一个 vue-router-config.js的 配置文件
import youCompontentName from './thePathOfYouCompontent'
import youCompontentName2 from './thePathOfYouCompontent2'
import youCompontentName3 from './thePathOfYouCompontent3'
//导入自己的页面组件
export default [
{
path:'youWantThePathOfYouCompontent',//你这个组件的url名称,唯一值
name:'noPossibleButSometimeIsUseful',//唯一值,非必须,但是有时很有用
compontent: youCompontentName //引用上面导入的组件
},
{
path:'youWantThePathOfYouCompontent2',
name:'noPossibleButSometimeIsUseful2',
compontent: youCompontentName2
},
{
path:'youWantThePathOfYouCompontent3/:name/:age', //带参数的情况
name:'noPossibleButSometimeIsUseful3',
compontent: youCompontentName3
},
]
- 在页面中使用路由
<div>
<router-link to='youWantThePathOfYouCompontent2'>linkA</router-link> //类似于a标签,to内为跳转到的路由名称
<router-link :to="'youWantThePathOfYouCompontent3/'+name+'/'+20">linkB</router-link> //如果路由名是动态生成的,可以用v-bind绑定
</div>
<div>
<router-view></router-view>
</div>
- 获取路由的参数
在视图页面,要是想获取当前路由的参数可以用以下方法
$router.params.name
//获取路由传参
$router.query.name
//获取url传参
- 子路由
仅在路由配置列表中加入children就可以了,
import youCompontentName from './thePathOfYouCompontent'
import youCompontentName2 from './thePathOfYouCompontent2'
import youCompontentName3 from './thePathOfYouCompontent3'
import youChilcCompontentName from './thePathOfYouChildCompontent'
import youChilcCompontentName1 from './thePathOfYouChildCompontent1'
//导入自己的页面组件
export default [
{
path:'youWantThePathOfYouCompontent',//你这个组件的url名称,唯一值
name:'noPossibleButSometimeIsUseful',//唯一值,非必须,但是有时很有用
compontent: youCompontentName //引用上面导入的组件
},
{
path:'youWantThePathOfYouCompontent2',
name:'noPossibleButSometimeIsUseful2',
compontent: youCompontentName2,
children:[
{
path:'youWantThePathOfYouChildCompontent',
name:'noPossibleButSometimeIsUseful4',
compontent: youChildCompontentName
},{
path:'youWantThePathOfYouChildCompontent2',
name:'noPossibleButSometimeIsUseful5',
compontent: youChildCompontentName2
},
]
},
{
path:'youWantThePathOfYouCompontent3/:name/:age', //带参数的情况
name:'noPossibleButSometimeIsUseful3',
compontent: youCompontentName3
},
]
然后你就可以在youCompontentName2中的进行子路由的跳转了 当然如果你嫌
<router-link to='youWantThePathOfYouCompontent2/youWantThePathOfYouChildCompontent2'>linkA</router-link>
中的链接太长的话,你也可以这么写
<router-link to='youWantThePathOfYouChildCompontent2' append>linkA</router-link>
append 的意思就是在当前的地址上追加
- 在程序中控制router的跳转
//在对应的执行地点,添加
this.router.push('/youWantThePathOfYouCompontent');
//带参数的情况,这个时候,必须要使用name
this.router.push({
name:'noPossibleButSometimeIsUseful3',
params:{
name:'hello',
age:20
}
})
- 页面中有多个平级的那么就要使用命名视图了
<router-view name='header'></router-view>
<router-view name='content'></router-view>
这样的话,在vue-router-config.js中对应的组件配置要这么写:
{
path:'/youPath',
components:{
header: headerComponent,
content: contentComponent
}
}
- 导航钩子
主要用于在路由层次检查信息.如:登陆状态
在main.js(应用的入口文件)中编辑
//路由跳转前执行
//三个参数,到哪里去,从哪里来,下一步做什么
router.beforeEach(function(to ,from ,next){
next('/youContralPath'); //你控制的跳转
next();//正常执行
})
//路由跳转后执行
router.afterEach(function(to ,from){
})