Vue路由及导航

Vue导航及路由用法

1.常见的两种导航

1.1声明式导航：

该方法主要用于定义导航链接，然而有时候我们需要用代码动态改变链接，就需要用到下面这种编程式导航了。

1.2编程式导航

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

router.push(…)

常见的几种用法有以下几种。

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

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

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

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

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

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

1.3 使用replace导航

在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。

router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

使用：

this.$router.replace({path: '/cart'});

2.常见的几种路由

2.1命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称

具体做法如下：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',----通过name指明路由的名字
      component: User
    }
  ]
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

下面这种做法就会把路由导航到 /user/123 路径。params:为传递给':'后面的参数
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2.2动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。即以/user开头的路径都会映射到User组件

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

2.3嵌套路由匹配

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

3.命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

即通过使用name属性即可
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

3.1对命名视图的正确理解

该命名视图的作用就是可以通过一个链接同时展示多个组件，并且可以对这些组件进行独立布局。

其实路由配置应该像下面这样：如果你要通过一个链接同时展示多个组件。你需要要把所展示的路由组件放在一个componts下才可以。如下所示：

export default new VueRouter({
    routes: [
      // 动态路径参数 以冒号开头
      { 
        // path: '/login/:user/name/:hjx', 
      path: '/', 
      // component:loginPage,
      // name:'hjx_login'
      //命名视图
      components: {
        //登录界面
        //注意：这里的login为name（命名），loginPage：为组件
        login:loginPage, 
        test:test1       
      }

正确展示视图的做法如下：

注意：
1.这里可以通过class调整组件的样式，比如位置布局。
2.如果组件本身设置了left，top（即定位），则class对组件不起作用。
 <router-view class="view_login" name="login"></router-view>
 <router-view class="set_test" name="test"></router-view>

4.嵌套命名视图

参考地址：嵌套命名视图

5.重定向和别名

5.1常见的几种重定向方式

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

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

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

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

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

5.2路径别名

重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

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

别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。**

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

别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。