Vue-Router入门-掌握基础知识_vue router中,( )标签将路由匹配到的组件渲染在这里。

实例:

注意: 当使用路由参数时, 例如从 /user/foo 到 /user/bar ,原来的组件实例会被复用, 组件的生命周期不会在被调用.

捕获所有的路由或404路由

{
    // 匹配所有的路径.
    path: '\*'
}
{
    // 匹配以 '/user-' 开头的任意路径
    path: 'user-\*'
}

含有通配符的路由应该放在最后,路由{path: ‘*’} 通常用于客户端404错误.

当使用一个通配符时, $route.params会自动添加一个名为 pathMatch 的参数. 它包含了URL通过 通配符 被匹配到的部分:

匹配优先级

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

🚶‍♂️嵌套匹配

一个被渲染组件同样可以包含自己的嵌套 <router-view>

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
        }
      ]
    }
  ]
})

🚶‍♀️编程式导航

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

router.push()

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

• 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
• 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

该方法可传入的参数

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

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

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

// 带参数
router.push({path: 'register', query: {plan: 'private'}})
// 这里写入path, 使用params传参不生效.
router.push({path: 'register', params: {plan: 'private'}}) //XXX

router.replace()

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

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

router.go()

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

🏃‍♂️命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。

name 配置项

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

跳转链接的时候就可以直接使用

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

router.push({name: 'user', params: {userId: 123}})

🏃‍♀️命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示.

例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

HTML

<router-view class="view one"></router-view>
<router-view class="view two" name="b"></router-view>
<router-view class="view three" name="a"></router-view>

JS

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

🚣‍♂️两个新的生命周期钩子

1.作用: 路由组件所独有的两个钩子, 用于捕获路由组件的激活状态

2.具体名字:

activated 路由组件被激活时触发.页面初始化只能激活一次，只有在第一次进入页面时会触发一次。
deactivated路由组件失活时触发.

activated 与 deactivated 和 beforeRouteEnter 与 beforeRouteLeave 的执行时间:

应用场景:

• ​ deactivated() : 清除定时器.

  // 被激活的
  activated(){
  console.log(‘news组件被激活’);
  this.timer = setInterval(() => {
  this.opacity -= 0.01
  if(this.opacity <= 0) this.opacity = 1
  }, 16)
  },
  // 取消激活的
  deactivated(){
  console.log(‘news组件失活啦’);
  clearInterval(this.timer)
  }

• activated() :可用于初始化页面数据等.

🤽‍♂️路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。路由里面提供了 props 配置项, 使得路由组件可以更方便的接收数据.

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

布尔模式

props:true

props值为布尔值, 若布尔值为真, 就会把该路由组件收到的所有params参数, 以props的形式传给User组件.

对象模式

props:{a:1,b:'hello'}

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

[外链图片转存中…(img-FGgJBTez-1714337816479)]