路由跳转

路由跳转的方式

1、编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

(1) 前进和后退this.router.go(1)：功能跟我们浏览器上的后退和前进按钮一样，这在业务逻辑中经常用到。比如条件不满足时，我们需要后退。

app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法


<button @click="goback">后退</button>
<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

(2) 编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。this.$router.push

export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
            // 字符串
      this.$router.push('/');
    }
  }
}

2、声明式导航

（1）方式1

<template>
<div id="app">
<h1>Hello App!</h1>
<p>
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/">Go to root</router-link>
     <router-link to="/demo">Go to demo</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>

（2）方式2

 <router-link :to="`/film/edit/${scope.row.filmId}`">  //这种方式就是跟to一样，只是第一种方式to的后面跟的是一个死值，这里的值可以变，建议使用这种方式。
            <el-button size="small" type="primary" icon="el-icon-edit" circle class="del"></el-button>
          </router-link>

3、子路由

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应要显示的组件
        },
        {                    //每一个链接都是一个对象
      path: '/demo',     //链接路径
      name: 'Demo',     //路由名称，
      component: Demo   //对应要显示的组件
        },
        {
            // 对某个路由使用子路由，那么需得在Hi1组件内使用 <router-view></router-view>，否则切换
            // 了子路由也无法显示出来
            path:'/h1',
            name:'Hi1',
            component:Hi1,  // 当访问 /h1的时候显示Hi1这个组件
            children:[
                {path:"/", component:Hi1}, // 当访问 /h1的时候<router-view></router-view>被这个组件替换，就会有2个Hi1组件内容。一般不这么写，一般这么写{ path: '', component: Hi1 },
                {path:"h2", component:Hi2}, // 当 /h1/h2 匹配成功，Hi2会被渲染在 Hi1 的 <router-view> 中
                {path:"h3", component:Hi3}  // 当 /h1/h3 匹配成功，Hi3会被渲染在 Hi1 的 <router-view> 中
            ]
        }
  ]
})

4、动态路由

. 动态路由的匹配和获取值

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
---------在User组件中可以通过下面方式去拿------------
{{$route.params.id}}

. 动态路由的跳转

第一种声明式动态路由跳转
<!-- 动态路由通过命名路由跳转  /user/123   -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
第二种编程式导航的动态路由跳转
const userId = '123'
// 对象，命名的动态路由
router.push({ name: 'user', params: { userId }}) // -> /user/123

// 如果提供了 path，params 会被忽略
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

5、路由重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

6、路由传参

一、 （1）

传递参数：用$router

<!-- test-vue-router页面 -->
<template>
  <div>
    <a @click="routerTo()">query传参</a>
  </div>
</template>
<script>
export default {
  methods: {
    routerTo() {
      this.$router.push({
        name: `TestVueRouterTo`,
        params: {
          page: '1', code: '8989'
        }
      })
    }
  }
}
</script>

（2）

接受参数：用$route，少个r,注意啦

<!-- test-vue-router-to页面 -->
<template>
  <div>
  </div>
</template>
<script>
export default{
  data() {
    return {
      page: '',
      code: ''
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.page = this.$route.params.page
      this.code = this.$route.params.code
      console.log('page', this.page)
      console.log('code', this.code)
    }

  }
}
</script>

二、query：最好也用name来识别，保持与params一致性，好记了，路径传参

query传参：

传递参数页

<!-- test-vue-router页面 -->
<template>
  <div>
    <a @click="routerTo()">query传参</a>
  </div>
</template>
<script>
export default {
  methods: {
    routerTo() {
      this.$router.push({
        name: `TestVueRouterTo`,
　　　　　// 只是把query改了，其他都没变
        query: {
          page: '1', code: '8989'
        }
      })
    }
  }
}
</script>

接受参数

<!-- test-vue-router-to页面 -->
<template>
  <div>
  </div>
</template>
<script>
export default{
  data() {
    return {
      page: '',
      code: ''
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      // 只是改了query，其他都不变
      this.page = this.$route.query.page
      this.code = this.$route.query.code
      console.log('page', this.page)
      console.log('code', this.code)
    }

  }
}
</script>

路由传参的三种方式

方案一：

 getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

方案一，需要对应路由配置如下：

  {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

 {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

 this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

对应路由配置：

{
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

$route.query.id