功能说明：路由的设置

方法1  /path?id=

src/router/index.js文件

需要先引入页面

import a1 from '@/article/a1'//命名

然后再使用路由

,{
      path: '/a1',//路劲
      name: 'art',// 名字
      component: a1//命名的模块
    }

页面使用方法

父页面

<router-link :to="{path:'/a1',query: {id:items.id}}">{{items.title}}</router-link>

我上面的用了v-for

子页面接收参数

data () {
    return {
      aid: this.$route.query.id
    }
  },
  created () {
    console.log(this.aid)//输出测试下
  }

实用

//传值this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})

//用query获取值
<p>提示：{{this.$route.query.alert}}</p>

方法2 /path/id

src/router/index.js文件

同样的引入页面

import a2 from '@/article/a2'

配置方法

  { path: '/a2/:id', component: a2, props: true }

id即为传递的参数 多个就  /:id/:ids

连接方法

 <router-link :to="/a2/+items.id">
                {{items.title}}</router-link>

接收参数

 data () {
    return {
      aid: this.$route.params.id
    }
  },
  created () {
    console.log(this.aid)
  }

好了

去掉路由的#

src/router/index.js文件

  mode: 'history',
  base: '/', // 如果项目根目录不为域名，则添加该行

实用技巧：

上面放的都是列表页面的方法

下面介绍一个单独的，比如我们进入一个页面判断是否登录，然后跳转不同的页面的方法

router.push('home') 
// 对象
this.$router.push({path: '/login?url=' + this.$route.path}); 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }}) 
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {            if (code === 0) {                // 对象
                this.$router.push({path: '/home'});
            }else if(code === 10){                // 带查询参数，变成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});
// 设计查询参数对象
let queryData = {};if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}this.$router.push({path: '/my/profile', query: queryData});

（1）由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问

this.$router.push({name:"menuLink",params:{alert:"页面跳转成功"}})

（2）在目标页面通过this.$route.params获取参数：

<p>提示：{{this.$route.params.alert}}</p>

（3）在目标页面通过this.$route.query 获取参数

//传值
this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})

//用query获取值<p>提示：{{this.$route.query.alert}}</p>