一、vue-router共两种模式:hash模式(默认)、history模式
模式可通过router文件夹中的index.js文件进行设置:
export default new Router({
mode:'history',//'hash'或'history'
routes: [
{
path: '/user/:username',
name: 'HelloWorld',
component: HelloWorld
}
]
})
hash模式:url地址中带有#
history模式:url地址中无#,比较美观
二、嵌套路由
1.在router文件中设置:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import router1 from '@/view/router1' //1.引入
import router2 from '@/view/router2'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld,
children:[ //2.二级路由
{
path:'router1', //注意:子路由中的path路径必须是相对路径,不带/
name:'router1',
component:router1
},{
path:'router2',
name:'router2',
component:router2
}
]
}
]
})
2.一级路由helloword中:
<router-link to="/hello/router1">二级路由1</router-link>
<router-link to="/hello/router2">二级路由2</router-link>
<div>
<router-view></router-view>
</div>
注意:to中的路径必须是绝对路径
三、编程式路由--通过js进行跳转
1.一级路由中:
<template>
<div>
<div>商品列表页</div>
<router-link to="/detail">商品详情页</router-link>
<button @click="toDetail">商品详情页-按钮</button>
</div>
</template>
<script>
export default {
name: "GoodList",
methods:{
toDetail(){
// this.$router.push('/detail')
this.$router.push({path:'/detail',query:{goodsId:'111'}}) //带参数
}
}
}
</script>
2.二级路由中:
<template>
<div>
商品详情页{{$route.query.goodsId}} //获取参数 --刷新页面,参数还在
<button @click="goBack">返回列表页</button>
</div>
</template>
<script>
export default {
name: "GoodDetail",
methods:{
goBack(){
this.$router.go(-1) //返回上一页
}
}
}
</script>
三、命名式路由
1.一级路由中:
<router-link :to="{name:'GoodDetail',params:{goodsid:'123'}}">商品详情页-命名</router-link>
name:要跳转的页面在路由文件中设置的name值
params:传递的参数 ---刷新页面参数消失
注意:其中to必须通过v-bind绑定;name 的参数必须和路由中设置的name值相同
2.二级路由中可通过
{{$route.params.goodsid}}获取参数