利用js，按钮事件跳转组件
<template>
<div>
<h1>我是详情页面,传过来的Key值为{{keyid}}</h1><br/>
<button v-on:click="jumpHeader()">通过Js跳转到Header组件</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'我是详情页面+1',
keyid:''
}
},
methods:{
jumpHeader(){
this.$router.push({ path:'header' });
}
},
mounted(){
console.log(this.$route.query); /*获取get传过来的值*/
alert(this.$route.query.keyid);
this.keyid = this.$route.query.keyid;
}
}
</script>
<style lang="scss" scoped="scoped">
</style>还可以给路由起个名字 用名字跳转
main.js配置
const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News,name:'news' },
{ path: '/content/:aid', component: Content }, /*动态路由*/
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]组件内编写
//另一种跳转方式
this.$router.push({ name:'news' });
//传参跳转方式
this.$router.push({ name: 'news', params: { userId: 123 }})——————————————————————————————————————————————————
终于到点上的了，咱们跳转地址栏不是有个很丑的#号吗，终于要说去掉的方法了
vue-router 默认是hash模式--使用url的hash来模拟一个完整的url，于是当url改变时
页面不会重写加载。
如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用
history.pushState API来完成
Main.js
const routes = [
{ path: '/header', component: header },
{ path: '/news', component: news },
{ path: '/content', component: content }, /* 动态路由 （就是个传值）*/
{ path: '*', redirect: '/header' } /*默认跳转路由*/
]
//3.实例化VueRouter
const router = new VueRouter({
mode:'history',
routes:routes//引用的上面定义的
})这样就可以了。。。好简单
但是这个模式有个问题
比如去直接访问/index.html会有问题
要配合后端去做
这个到时候说=。=
——————————————————————————————————————————————————————
路由的嵌套
示例图
点击了上面的标签然后显示左边的标签，然后上面的标签不变
这就是路由的嵌套，也可以叫父子路由
现在我们写个小例子，最上层是用户中心，点出左边出现用户列表各项操作列表，
点击各种操作 ， 右边的主显示框显示可以操作的内容
首先 先建立一个User.vue
先注册上路由
import header from './components/Header.vue';
import news from './components/News.vue';
import content from './components/Content.vue';
import User from './components/User.vue';
import userlist from './components/User/UserList.vue';
import useradd from './components/User/UserAdd.vue';
//2.配置路由
const routes = [
{ path: '/header', component: header },
{ path: '/news', component: news },
{ path: '/content', component: content }, /* 动态路由 （就是个传值）*/
{ path: '/user/', component: User,
children:[
{path:'userlist' , component: userlist},
{path:'useradd' , component: useradd}
]
},
{ path: '*', redirect: '/header' } /*默认跳转路由*/
]然后再vue组件实现一个div左右布局
<template>
<div id="user">
<h1>{{msg}}</h1><br/>
<div class="user">
<div class="left">
<ul>
<li><router-link to="/user/userlist">用户列表</router-link></li>
<li><router-link to="/user/useradd">新增用户</router-link></li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:'用户中心',
list:['用户查询','用户管理','用户导入','用户导出']
}
},
methods:{
}
}
</script>
<style lang="scss" scoped="scoped">
.user{
display: flex;
text-align: center;
.left{
width: 200px;
min-height: 400px;
border-right: 1px solid #eee;
}
.right{
flex:1;
}
}
</style>
然后该去建立一个属于他子路由的文件夹路径便于区分
里面的内容就是显示一个自己是谁=。=
接着去配置他们俩的路由吧
import header from './components/Header.vue';
import news from './components/News.vue';
import content from './components/Content.vue';
import User from './components/User.vue';
import userlist from './components/User/UserList.vue';
import useradd from './components/User/UserAdd.vue';
//2.配置路由
const routes = [
{ path: '/header', component: header },
{ path: '/news', component: news },
{ path: '/content', component: content }, /* 动态路由 （就是个传值）*/
{ path: '/user/', component: User,
children:[
{path:'userlist' , component: userlist},
{path:'useradd' , component: useradd}
]
},
{ path: '*', redirect: '/header' } /*默认跳转路由*/
]重点就是在user路由里 加一个children属性 然后里面的配置参数和上一级一样
之后就到了去配置user.vue的一个入口了（）
<div class="right">
<router-view></router-view>
</div>然后点击左边的列表就完成了这种功能
但是这样还会有一个问题，进入这个用户中心了，但是右边默认是没有东西的 会很空 ，那么我们可以让他默认去加载一个子路由的内容
直接在App.vue 进入 路径这么写就可以了
<router-link to="/user/userlist">用户中心</router-link>