veu传参几种方式

1、query的方式

<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>
使用：this.$route.query.id

地址栏： [http://localhost:8081/#/test?name=1](http://localhost:8081/#/test?name=1)

2、params的方式

<router-link :to="{name:'/test',params: {id: id}}">跳转</router-link>
使用：this.$route.params.id

地址栏： [http://localhost:8081/#/test/12345](http://localhost:8081/#/test?name=1)

配置路由：

{
  path: '/test/:id',
  component: testingCenter,
  meta: { title: '检测中心' }
}

传参：
<router-link :to="'/test/'+id">跳转</router-link>
使用：this.$route.params.id（这个id给上图路由的配置有关）

地址栏：http://localhost:8081/#/test/1

动态路由子路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home/:id/:user',
      name: 'home',
      component: home,
      redirect: '/home/spp/:id/:user',
      children: [{
        path: '/home/spp/:id/:user',
        name: 'spp',
        component: spp
      }]
    },
    {
      path: '/video',
      name: 'video',
      component: video
    }
  ]
})

使用：
<router-link to="/home/213/456">Go to Foo</router-link>
    <router-link to="/video">Go to Foo</router-link>

地址栏 ：http://localhost:8080/#/home/spp/213/456

vue路由跳转有四种方式

1. router-link

2. this.$router.push() (函数里面调用)

3. this.$router.replace() (用法同push)

4. this.$router.go(n)

一、不带参

1.1 router-link

<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

1.2 this.$router.push()

this.$router.push('/home') 
this.$router.push({name:'home'}) 
this.$router.push({path:'/home'})

1.3 this.$router.replace() (用法同push)

二、带参

2.1 router-link

<router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
<router-link :to="{name:'home', query: {id:1}}"> 
 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id

2.2 this.$router.push(query传参

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
 
params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id

2.3 this.$router.replace() (用法同push)

this.$router.go(n)

this.router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

区别：

this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

参数可以是一个字符串路径，或者一个描述地址的对象:

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

//router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)