vue-router入门随笔

下面整理根据官方文档以及自我理解整理，如有不足，请指教。

下面是来自一段官方的原话。

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

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

来一个简单的栗子

js
// 引入vue
// 引入vue-router，  假如是模块化编程，需要Vue.use(VueRouter)来使用插件

// 1、引入组件，定义也可
import Bar from './Bar'




// 2、定义路由
const routes = [
    {path: '/bar', component:Bar}
]

// 3、创建一个router实例，然后传入routes

const router = new VueRouter({
    router
})

// 4、创建跟实例并挂载
cosnt app = new Vue({
    router
}).$mount('#app')

这样一个简单的路由就实现了，可以在vue的根实例就来访问路由。比如：this.$router,this.$route

this.$router: 表示用来访问路由器

this.$route: 表示当前路由

比如：this.$router.go(-1) 用来后退一步，而this.$route.params查看当前路由url的参数

这里的this.$router和上诉代码的router实例其实是一致的，如：也可以直接使用上面的router实例来进行操作，当然这样的话，就需要在每一个需要使用路由的地方来引入路由，这样的话略显麻烦。所以还是采取使用this.$router来使用的比较方便。

另一个概念：视图

视图：路由匹配到的组件讲渲染到改视图处，这往往很有用，比如将一个页面切分成很多区域，实际路由实际去刷新那一部分区域即可。

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

动态路由：上面的路由都是写死的，比如/bar，但实际业务可能不止这样，所以可以使用动态路由来进行匹配

const City = {
    template:  '<div>城市名字： {{$route.params.cityname}}</div>'
}

const router = new VueRouter({
    routes: [
        // 动态路由的参数，由冒号开头表示
        { path: '/city/:cityname'， component: City}
    ]
})

// 这样，当路由访问到/city/广州，这样模板中，就会渲染出城市的名字，所以可以用$route.params来获取动态参数。

动态路由是可以嵌套的。

如：/city/:cityname/select/:select_id, 这里就有两个动态路由了。对应的cityname和select_id的值都会设置到$route.params中。

通配符匹配：可以使用*来匹配任意路径，这往往是有用的，毕竟谁也不想用户直接看到404状态码。

{
    // 这样会匹配所有的路径
    path: '*'
}

// 通配符的位置需要放置路由的最后。
// 这里因为路由匹配的规则是根据路由定义的先后来跳转的

// 所以下面这种是错误的，会一直匹配到*
cosnt error = {
    template: '<div>嘿，这里不是你该来的</div>'
}

const routes = [
    {
        path： ‘*’，
        component: error
    },
    {
        // 正常路由
        path: '/city‘,
        component: xxx
    }
]
    

所有为了避免这种情况，还是把通配符放最后吧。

// 这样就正常了
const routes = [
     {
        // 正常路由
        path: '/city‘,
        component: xxx
    },   
    {
        path： ‘*’，
        component: error
    }
]

这里就关于路由的匹配优先级的问题，路由的优先级是根据定义的顺序来排的

在使用通配符的时候，$route.params会自动添加一个pathMatch的参数，包含着URL通过通配符的部分。

// 如果按照上诉的路由
this.$router.push(/cityname)  // 由于没有该路由，所以匹配通配符
this.$route.params.pathMatch // ’cityname‘

嵌套路由：嵌套路由属于经常通用的情况，毕竟/aaa显示一个组件,/aaa/bbb显示是另一个组件，所以嵌套来使路由便于管理

const router = new VueRouter({
    routes: [
        { path: /city/:id, component: City,
           children: [{
                // 当路由进入 /city/:id/post  匹配成功
                // 注意这里不能写/post，这样会直接匹配到根路由，也就失去了嵌套路由的意义
                path: 'post'，
                component；CityPost
            }]
        }         
    ]
})

// 嵌套路由使用children作为子级的路由，这样可以嵌套多层路由，子子孙孙孙孙孙无穷尽

编程式内容：

 导航路由的时候，我们可以使用<router-link :to="xxx">来渲染成a标签来进行导航，可以使用this.$router的方法进行导航。

router的方法是效仿 window.history的api

router.push(location, onComplete, onAbort)

--location（路由地址）是必选的，其他两个是回调方法，在新版本中，会直接返回一个promise，直接.then来进行回调就可

 // 推入路由来显示，vue-router的路由模式应该是根据栈来设计的（不知道，瞎讲的，没看过源码）

 // 打脸了，还真是栈，不过是history栈，这个方法会向history栈，推入一条记录。

所以<router-link :to=“xxx”>和router.push(“xxx”) 是一样的。

--location: 这个参数可以是一个字符串路径，也可以是一个对象

// 字符串
router.push(’city‘)

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

// 命名路由, 相当于给路由定义一个名字，需要在路由那边使用name来定义
router.push({name: 'user', params: {userId: '123'}})
// 这里为什么使用path呢，由于使用path的话，params会被忽略掉，因为参数本来就是路径的一部分，所以要写满带参数的路径
// 如：
router.push({ path: `/user/${userId}` }) 



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

router.replace(location, oncomplete, onAbort)

参数上同，不同点，在于不会像history添加新纪录，而是替换掉

<router-link :to="" replace>  // 声明式

router.go(n)

--n是一个整数，用来表示在history中前进或者后退几步，和window.history.go(n)原理,超出记录的长度则失败

命名路由：通过来个路由起一个别名来进行访问

// 上诉代码块中，使用名字，是需要像下面这样使用name来定义就可
const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

命令视图：视图时路由的出口，组件渲染在这里，但是视图可以有多个，来渲染多个组件.

router-view中使用name属性来定义，默认不填为default

路由配置时，使用components来配置（需要添加s）

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

重定向：重新定位到另一个位置,在路由配置中使用redirect：'路径xxx'来声明