Vue Router 官方摘要 基础

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

通过传递 `to` 来指定链接, 将呈现一个带有正确 `href` 属性的 `<a>` 标签

 

<router-link to="/home">Go to Home</router-link>

路由匹配到的组件将渲染在router-view标签上 

router-view 将显示与 url 对应的组件。

你可以把它放在任何地方，以适应你的布局<router-view></router-view>

通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由

我们使用 this.$router 的原因是，我们不想在每个需要操作路由的组件中都导入路由。

经常使用 router 实例，请记住，this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同

# vue3的setup函数访问路由， 调用 useRouter 或 useRoute 函数去实现后续逻辑。

带参数的动态路由匹配

路径参数 （path中）用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。

$route的各种属性  

使用带有参数的路由时需要注意的是，

当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。

因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

 

响应路由参数的变化   

（这个写法的不是很熟悉，监听路由变化来调用原本生命周期中的逻辑）

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params

或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航

 

捕获所有路由或 404 Not found 路由

常规用 / 分隔；在 路径参数 后面的括号中加入 正则表达式匹配任意路由。

pathMatch

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

 

 

 路由的匹配语法， 正则、可重复、可选

路由优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

 

路由匹配工具   https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJHOuQDsDE8DggSWgJoAAiQ..#

 

!  嵌套路由

在非顶层的 router-view，要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children

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

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

<router-link :to="..."> 等同于调用 router.push(...)

name        params
path          query
注意，path后的params不生效

注意： 如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push(location, onComplete?, onAbort?)

router.replace(location, onComplete?, onAbort?)

router.go(n)    1 前进一步  -1后退一步

//  如果 history 记录不够用，那就默默地失败呗

跟 window.history.pushState、 window.history.replaceState 和 window.history.go (opens new window)好像， 实际上它们确实是效仿 window.history API 的。

window.history.forward()

命名视图 展示多个router-view

name 默认为 default

<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>



const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

 

 

重定向  redirect

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

    { path: '/a', redirect: { name: 'foo' }}

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

 

别名   alias

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

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

 

路由组件传参

使用 props 将组件和路由解耦，传递到各种形式参数到组件的props上

布尔模式、对象模式、函数模式

props: { default: true, sidebar: false }

props: { newsletterPopup: false }

props: route => ({ query: route.query.q })

HTML5 History 模式

暂略，一般要和后端配合才用

 

 

posted @ 2022-02-10 12:23  Dz&Ying  阅读(62)  评论(0)    收藏  举报