很轻松的vue路由

Vue路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

router-link

来引入路由

<router-link to="/about">

router-view

来获取路由

<router-view class="view has-tabs"/>

router/index.js

路由配置

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/user/:id',
    name: 'user',
    component: User
  },
  {
    path: '/about',
    name: 'about',

 注意：路径参数 用冒号 : 表示。

 

 这样就把参数传过来了

$route

还有一些路由跳转的命令

后退
back（）
go（-1）

前进
forward（）
go（1）

跳转
push（）

替换
replace（）

这些可以实现跳转的命令方便快捷

注意：replace命令跳转页面不会有历史记录（即回不去原来页面）

响应路由参数的变化

相同的实例可以重复利用更加高效

捕获所有路由或 404 Not found 路由

	const routes = [
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/ produce/:id',
    name: ' produce',
    component:  Produce
  },
  {
    path: '/user',
    name: 'user',
    component: User
  },

如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式