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

HTML

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JS

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
//整个应用只有一个router, 可以通过组件的 `$router`属性获取到.
// 现在，应用已经启动了！

🧍‍♀️动态路由匹配

动态路径参数

path: '/user/:id'

应用场景: 例如一个User组件,对于不同用户(ID各不相同),都要使用这个组件来渲染.

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

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

<router-link class="list-group-item" active-class="active" to="/user/afo">About</router-link>

一个 “路径参数” 使用冒号 : 标记, 当匹配到一个路由时,参数值会显示在 this.$route.params 供每个组件使用.

实例:

注意: 当使用路由参数时, 例如从 /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() :可用于初始化页面数据等.

🤽‍♂️路由组件传参

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。