在创建使用router步骤:
第一步创建文件(第一级router)
第二步引用
import error from ‘@/components/error‘ 注意下面配置了什么 全部都要引用到
第三配置
import Vue from ‘vue‘
import Router from ‘vue-router‘
//一级路由
import HelloWorld from ‘@/components/HelloWorld‘
import men from ‘@/components/men‘
import people from ‘@/components/people‘
import women from ‘@/components/women‘
import error from ‘@/components/error‘
//二级路由
import name from ‘@/components/people2/name‘
import time from ‘@/components/people2/time‘
import welcome from ‘@/components/people2/welcome‘
//第三级路由
import name2 from ‘@/components/people2/peopleName/name2‘
import time2 from ‘@/components/people2/peopleName/time2‘
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/‘,
name: ‘HelloWorld‘,
component: HelloWorld //一级路由
},
{
path: ‘/men‘,
name: ‘men‘,
component:men
},
{
path: ‘/people/:id‘,
name: ‘people‘,
component: people,
// redirect: ‘people2/welcome‘,
children:[
{
path: ‘/people2/welcome‘, //二级路由
name: ‘welcome‘,
component:welcome,
},
{
path: ‘/people2/name‘,
name: ‘name‘,
component:name,
children:[
{
path: ‘/people2/peo/name2‘, //三级路由 ,注意,这里的地址要和在<router-link to="这里一样"><router-link>
name: ‘name2‘,
component:name2,
}
]
},
{
path: ‘/people2/time‘,
name: ‘time‘,
component:time,
},
]
},
{
path: ‘/women‘,
name: ‘women‘,
component: women
},
{
path:‘*‘,
name:‘error‘,
component:error //这里是配置错误页面404
}
],
mode:‘history‘ //这里是取消#号
})
下面是关于用方法:
<template> <div class="hello"> hello <!--除了使用router-link定义导航链接 还可以借助router实例方法 --> <button @click="toPeople">跳转people</button> <button @click="toPeople1">携带参数的跳转</button> <button @click="GoBack">GoBack</button> </div> </template> <script> export default { name: ‘HelloWorld‘, data () { return { msg: ‘Welcome to Your Vue.js App‘ } }, methods: { toPeople(){ //字符写法 // this.$router.push(‘/people‘) //对象写法 // this.$router.push({path:‘/men‘}) // 命名的路由 ,这样带个参数id给people 然后route.params可以接收 // this.$router.push({name:‘people‘,params:{id:‘123‘}}) //通过replace方法实现跳转,但是没有历史记录 this.$router.replace(‘/people/rep‘) }, toPeople1(){ }, GoBack(){ //一步 // this.$router.go(-1) //还有一种浏览器的原生方法 window.history.go(-1) } } } </script>
然后在people页面接收的
是
console.log(this.$route.params)
this.info=this.$route.params.id 注意这里是route 方法不是router 方法
原文：https://www.cnblogs.com/jflalove/p/11939315.html