vue路由学习笔记

解构:

1：用vue官方脚手架生成基本框架

2：安装vue-router element 

3:导入vue-router和elementui

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import router from './router';



Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4:view/router/index.vue

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRoutes = [

  {
    path: '/',
    component: () => import('@/views/foo/index'),
  },
  {
    path: '/foo',
    component: () => import('@/views/foo/index'),
  },
  {
    path: '/bar',
    component: () => import('@/views/bar/index'),
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

重定向:

1:路径,包含name的对象,返回路径或者而对象的函数

2：

组件:props:

1:如果 props 被设置为 true，route.params 将会被设置为组件属性

路由模式:HTML5 History 模式需要服务端配合？一直没理解，也没实际测试过！

基本用法:

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

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

const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

const app = new Vue({
  router
}).$mount('#app')

 当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active,可以设置全局CSS样式修改app.vue里面定义

实例对象:this.$route.params.username

this.$router 和 router 使用起来完全一样 避免每个实例都导入

<router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active  需要全局设置这个样式

动态路径参数:   

1:{ path: '/user/:id', component: User }

2:const User = {template: '<div>User {{ $route.params.id }}</div>'}

设置多段“路径参数”

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。

       因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。

不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数

{ path: '/', component: UserHome },

{ path: '', component: UserHome },两个写法一样的

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

编程式导航 :<router-link> 创建 a 标签来定义导航链接,还可以用编程

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

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL

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

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

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

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

如果提供了 path，params 会被忽略

同样的规则也适用于 router-link 组件的 to 属性。

可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。

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

router.replace(...)

这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

 

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

 

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

你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.historyAPI 的。

 

命名路由：a链接和编程导航写法

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事：

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

 

完整的导航解析流程


导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

<router-link>

1:默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签 激活自动设置激活类css
2:将激活 class 应用在外层元素,而不是而不是 <a> 标签本身

<router-link> Props

1:to属性，和router.push()参数一样 ，内部调用
2：replace 不产生history记录    <router-link :to="{ path: '/abc'}" replace></router-link>
3：append 当前路径追加路径 <router-link :to="{ path: 'relative/path'}" append></router-link> path为相对路径，最前面不写/生效
4：tag标签， <router-link to="/foo" tag="li">foo</router-link> 没有点击样式，但是能相应点击
5：active-class 激活样式，默认为"router-link-active" 默认值可以通过路由的构造选项 linkActiveClass设置
6：extact 路径匹配规则，默认是包含路径，比如a/b/c,会激活a/b a/b/c路由标签类名，可以设置全匹配
7：event 字符串或者字符串数组，指定用来激活导航的事件
8：exact-active-class 严格匹配时候的类名 默认 router-link-exact-active 可以全局指定

<router-view>

1:可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>
2:可以嵌套
3:可以带名字

Router 构建选项

 config设置项  

// 2.6.0+

  caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object; // 编译正则的选项  
  其他的一些基础的选项 就不列举了path,name,component,alis等

mode:默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)、可选值: "hash" | "history" | "abstract"

base:应用的基路径。默认为/ 例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

包含匹配路由激活类 linkActiveClass和 精确匹配的 激活类 linkExactActiveClass 样式设置