Vue 路由

路由配置 config.js

import Vue from 'vue';
// 导入
import VueRouter from 'vue-router';
// 安装
Vue.use(VueRouter);
// 使用
// 定义模板变量
const User = {
  template: '<div>User</div>'
}

var router=new VueRouter({
  mode: 'history',
  routes:[
        {
            path:"/search", // url 地址栏路径
            name:"search",  // 路由名称
            component:()=>import("@/components/Search"), // 引入组件模板
        },
        {
            path: '/user/:id', // 动态路径参数 以冒号开头
            component: User
        },
        {
            path: '/user/:page?/:id?' // 参数可选
        },
        {
             path: '/a', // 从 /a 重定向到 /b
             redirect: '/b'
        },
        {
            path: '/a',  //重定向的目标也可以是一个命名的路由
            redirect: { name: 'foo' }
        },
        { 
           path: '/a',  //  /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样
           component: A, 
           alias: '/b' 
        },
        {
          path: '*'   // 会匹配所有路径
        }
        {
          path: '/user-*'  // 会匹配以 `/user-` 开头的任意路径
        }
    ],
});
export default router;

 

*.vue 模板页或html 调用

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航.等同于调用 router.push(...) -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
   <router-link :to="..." replace>    <!--等同于 router.replace(...) --->
    
  </p>
{{ $route.params.id }} 
<a @click="$router.back(-1)" >点击</a>
<a @click="$router.go(-1)" >点击</a>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view /> 
</div>

 

*.vue js 中调用路由

router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

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

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

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

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

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况

 

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

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

// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)

// 后退一步记录，等同于 history.back()
this.$router.go(-1)

// 前进 3 步记录
this.$router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)

 

vue 中路由meta 元数据

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: {
        title: '首页入口',
        requiresAuth: true
      },
      children: [  // 子路由，嵌套路由
        {
          path: 'bar',
          component: Bar,
        }
      ]
    }
  ]
});

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  //访问验证
  if (to.matched.some(function (item) {
    return item.meta.requiresAuth;
  })) {
    next({
        path: '/login', // 可以使用 name, 与路由的配置相同
        query: { redirect: to.fullPath }
      });
  } else {
     next();
  }   
});

 

 路由模式

1. Hash: 使用URL的hash值来作为路由。支持所有浏览器。vue-router中默认使用的是hash模式,URL中带有#号
2. History: 以来HTML5 History API 和服务器配置。hash模式背后的原理是onhashchange事件
3. Abstract(memeory): 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。路径来这内存

router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。

Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。如果你使用了History 模式，请确保正确配置你的服务器。

相关路由：

嵌套路由（子路由）

命名视图

路由拦截处理（导航守卫）