【前端技术】vue-router使用

router配置

注册完的路由，不管是路由组件还是非路由组件都存在$route,$router属性

• $route：一般获取路由信息（路径，query，params等）
• $router：进行编程式导航，进行路由跳转（push，replace）

路由可以设置mate属性，也就是每个路由身上携带的信息。自定义编写

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

路由跳转传参

明式导航router-link：

• 不带参数跳转

链接如果是'/'开始就是从跟路由开始，如果开始不带'/',则从当前路由开始
<router-link to="about">关于</router-link>
<router-link :to="{ name: 'about' }">关于</router-link>
<router-link :to="{ path: 'about' }">关于</router-link>

• 带参数params跳转
  • 带参跳转时需要使用name关键字，使用path时能跳转，但是不能传递参数
  • 需要在路由里边配置path: '/about/:id’，并且传参会显示在链接中http://localhost:8080/about/1
  • 取值时使用 this.$route.params.id

<router-link :to="{ name: 'about', params: { id: 1 } }">关于</router-link>

• 带参数query跳转
  • 路由里边不需要设置 :id 参数，直接path: '/about’即可
  • 参数会拼接到 http://localhost:8080/about?id=1，类似get
  • 取值时使用 this.$route.query.id

<router-link :to="{ name: 'about', query: { id: 1 } }">关于n</router-link>
<router-link :to="{ path: 'about', query: { id: 1 } }">关于p</router-link>

编程式导航push，replace：

声明式导航能做的都可以做，还可以做其他的业务逻辑

• 不带参数跳转，name，path都可以使用

// this.$router.push("about");
// this.$router.push({ name: "about" });
// this.$router.push({ path: "about" });

• 带参数query，name和path都可以用，参数拼接到url中

//使用name关键字
this.$router.push({ name: "about", query: { id: 1, ids: 2 } });
// http://localhost:8080/about?id=1&ids=2

// 使用path关键字
this.$router.push({ path: "about", query: { id: 1, ids: 2 } });
// http://localhost:8080/about?id=1&ids=2

// 直接使用url拼接
this.$router.push("/about?id=1");
// http://localhost:8080/about?id=1

// 接收参数
this.$route.query

• 带参数 params，不会显示到url中

  路由需要配置path: '/about/:id/:ids’参数，否则刷新后参数消失

  params只能和name一起使用，否则参数传不进去

this.$router.push({ name: "about", params: { id: 1, ids: 2 } });

// 接收参数
this.$route.params

push, relpace, go区别

• push：跳转到指定url，并且向history栈中添加一个记录，点击后退会返回上一个页面
• replace：跳转到指定url，但是history中不会有记录，点击返回跳转到上上个页面（栈中有记录的页面，可以说是直接替换了当前页面）
• go：向前或者向后跳转n个页面，可以为正数或者负数，为0时刷新当前页。