路由跳转

路由跳转的方式

1、编程式导航

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

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

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

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

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

2、声明式导航

（1）方式1

（2）方式2

   //这种方式就是跟to一样，只是第一种方式to的后面跟的是一个死值，这里的值可以变，建议使用这种方式。

3、子路由

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

4、动态路由

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

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

. 动态路由的跳转

第一种声明式动态路由跳转

User
第二种编程式导航的动态路由跳转
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

（2）

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

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

query传参：

传递参数页

接受参数

路由传参的三种方式

方案一：

 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