解构:

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

基本用法:

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

来源：https://www.cnblogs.com/liuguiqian/p/11358156.html

标签

vue