利用js，按钮事件跳转组件

还可以给路由起个名字用名字跳转

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.实例化VueRouterconst 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左右布局

然后该去建立一个属于他子路由的文件夹路径便于区分

里面的内容就是显示一个自己是谁=。=

接着去配置他们俩的路由吧

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的一个入口了（）

然后点击左边的列表就完成了这种功能

但是这样还会有一个问题，进入这个用户中心了，但是右边默认是没有东西的会很空，那么我们可以让他默认去加载一个子路由的内容

直接在App.vue 进入路径这么写就可以了


   
    用户中心

转载地址：http://orkwb.baihongyu.com/

你可能感兴趣的文章

利用js，按钮事件跳转组件

我是详情页面,传过来的Key值为{ {keyid}}

终于到点上的了，咱们跳转地址栏不是有个很丑的#号吗，终于要说去掉的方法了

路由的嵌套

{ {msg}}

我是详情页面,传过来的Key值为{
{keyid}}

{
{msg}}