vue-router——vue简单说

àì夳堔傛蜴生んèń 2022-03-11 03:10 197阅读 0赞

### 目录 ###

*   *  安装
     *  官方实例：
     *  动态路由
     *  动态路由基本实例：
     *  路由嵌套
     *  编程式导航
     *   *  push
         *  replace
         *  go
     *  命名路由

前端路由：

> 单页面富应用（SPA）的核心，前端来维护一个路由规则.

vue-router：

> 官方定义：是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

## 安装 ##

npm 安装

npm install vue-router

模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

## 官方实例： ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue-router</title>
      <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    </head>
    
    <body>
      <div id="app">
        <h1>Hello App!</h1>
        <p>
          
          
          
          <router-link to="/foo">Go to Foo</router-link>
          <router-link to="/bar">Go to Bar</router-link>
        </p>
        
        
        <router-view></router-view>
      </div>
      <script>
        // 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')
    
        // 现在，应用已经启动了！
      </script>
    </body>
    
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190308100343556.gif]

注：从这里开始，示例将不再提供完整代码，省略head,body等标签以及vue.js和vue-router.js的加载等，仅展示javascript和html部分

vue-router

动态路由

路由嵌套

编程式导航

## 动态路由 ##

vue-router 的路由路径中使用“动态路径参数”。例如，有个用户组件，需要根据不同ID各不相同的用户，都是用这个组件来渲染。

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>匹配路径</th> 
   <th>$route.params</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/user/:username</td> 
   <td>/user/evan</td> 
   <td>{username: ‘evan’}</td> 
  </tr> 
  <tr> 
   <td>/user/:username/post/:post_id</td> 
   <td>/user/evan/post/123</td> 
   <td>{username: ‘evan’,post_id: ‘123’}</td> 
  </tr> 
 </tbody> 
</table>

当使用路由参数，同一个组件切换，如/user/foo跳转/user/bar，原来组件实例被复用。生命周期钩子函数不会被调用。

const User = { 
      template: '...',
      watch: { 
        '$route' (to, from) { 
          // 对路由变化作出响应...
        }
      }
    }

使用2.2中引入的beforeRouteUpdate导航卫士。

const User = { 
      template: '...',
      beforeRouteUpdate (to, from, next) { 
        // react to route changes...
        // don't forget to call next()
      }
    }

捕获路由或者404路由，匹配通配符\*

{ 
      // 会匹配所有路径
      path: '*'
    }
    { 
      // 会匹配以 `/user-` 开头的任意路径
      path: '/user-*'
    }
    //----------------------------------------分割线-----------------------------
    // 给出一个路由 { path: '/user-*' }
    this.$router.push('/user-admin')
    this.$route.params.pathMatch // 'admin'
    // 给出一个路由 { path: '*' }
    this.$router.push('/non-existing')
    this.$route.params.pathMatch // '/non-existing'

## 动态路由基本实例： ##

<div id="app">
      <h1>Hello App!</h1>
      <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/col/222">路由参数222</router-link>
        <router-link to="/col/333">路由参数333</router-link>
      </p>
      
      <router-view></router-view>
    </div>
    <script> // 1. 定义 (路由) 组件。 const Foo = { template: '<div>foo</div>' } const Col = { template: '<div>col路由参数：{ {$route.params.data}}</div>' } // 2. 定义路由 const routes = [{ path: '/foo', component: Foo }, { path: '/col/:data', component: Col } ] // 3. 创建 router 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) // 4. 创建和挂载根实例。 const app = new Vue({ router }).$mount('#app') </script>

> 运行结果：  
> ![在这里插入图片描述][20190309165532979.gif]

## 路由嵌套 ##

<div id="app">
      <h1>Hello App!</h1>
      <p>
        <router-link to="/user/222/profile">路由参数222+profile</router-link>
        <router-link to="/user/333/posts">路由参数333+posts</router-link>
      </p>
      
      <router-view></router-view>
    </div>
    <script> // 1. 定义 (路由) 组件。 const User = { template: ` <div class="user"> <h2>User { { $route.params.id }}</h2> <router-view></router-view> </div> ` } const UserProfile = { template: '<div>User-Profile</div>' } const UserPosts = { template: '<div>User-Posts</div>' } // 2. 定义路由 const 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 实例，然后传 `routes` 配置 const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) // 4. 创建和挂载根实例。 const app = new Vue({ router }).$mount('#app') </script>

> 运行结果：  
> ![在这里插入图片描述][20190309181636738.gif]

## 编程式导航 ##

### push ###

导航到不同的url，通过使用router.push方法，向history栈添加一个新的记录。可以后退返回上一url。

<router-link :to="...">

// 编程式： 
    router.push(...)

详细使用如下：

// 字符串
    router.push('home')
    
    // 对象
    router.push({  path: 'home' })
    
    // 命名的路由
    router.push({  name: 'user', params: {  userId: '123' }})
    
    const userId = '123'
    router.push({  name: 'user', params: {  userId }}) // -> /user/123
    router.push({  path: `/user/${ userId}` }) // -> /user/123

### replace ###

与push类似，不同在于不会向history添加新的记录，而是替换当前history记录。

<router-link :to="..." replace>

// 编程式： 
    router.replace(...)

### go ###

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

// 在浏览器记录中前进一步，等同于 history.forward()
    router.go(1)
    
    // 后退一步记录，等同于 history.back()
    router.go(-1)
    
    // 前进 3 步记录
    router.go(3)
    
    // 如果 history 记录不够用，那就默默地失败呗
    router.go(-100)
    router.go(100)

## 命名路由 ##

通过一个名称来标识一个路由显得更方便一些。

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

使用方式：

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

// 编程式： 
    router.push({  name: 'user', params: {  userId: 123 }})

--------------------

未完待续。。。

参考：[vue-router官网][vue-router]

[20190308100343556.gif]: /images/20220311/ca0bf52e021b408399c3c16206008c7a.png
[20190309165532979.gif]: /images/20220311/f578cf09bf974d2b86c5d9a02af84af3.png
[20190309181636738.gif]: /images/20220311/d1127f84e93e47d6aa86cd28c17b4ae0.png
[vue-router]: https://router.vuejs.org/zh/guide/