vue-router 路由

一个简单的示例

　// 1. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
　import Vue from 'vue';
　import VueRouter from 'vue-router';

　// 2. 定义（路由）组件。也可以从其他文件 import 进来，在不同路由下显示不同组件
　const Foo = { template: '<div>foo</div>' }
　const Bar = { template: '<div>bar</div>' }

　// 3. 定义路由，每个路由应该映射一个组件。 
　const routes = [
　  // 基本路由
　  { path: '/foo', component: Foo },
　  // 动态路由（有参数）
　  { path: '/user/:id', component: User }, 
　  // 嵌套路由，命名路由（指定name属性），用于跳转到该路由
　  {
　    path: '/user/:id', 
　    name: 'user',
　    component: User,
　    children: [
　        { path: 'profile', component: UserProfile },// 当 /user/:id/profile 匹配成功， UserProfile 会被渲染在 User 的 <router-view> 中
　        { path: 'posts', component: UserPosts }// 当 /user/:id/posts 匹配成功 UserPosts 会被渲染在 User 的 　　<router-view> 中
　    ]
　  },
　  // 命名视图（指定router-view的name属性），一个路由使用并显示多个组件
　  {
　      path: '/',
　      components: {
　        default: Foo,
　        a: Bar,
　        b: Baz
　      }
　    },
　  // 路由重定向
　  { path: '/a', redirect: '/b' },  // string
　  { path: '/a', redirect: { name: 'foo' }},  // object
　  { path: '/a', redirect: to => { // 根据目标路由to返回一个路径}},  //  function
　  // 路由别名
　  { path: '/a', component: A, alias: '/b' }
　]

　// 3. 创建 router 实例，然后传 `routes` 配置
　const router = new VueRouter({
　  mode: 'history', // 非hash模式
　  routes // （缩写）相当于 routes: routes
　})

　// 4. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
　const app = new Vue({
　  router
　}).$mount('#app')

-----------------------------------------------------------------------------------------------------------------------------------------------

// 导航到指定路由
<nav class="menu">
  <router-link to="/foo">Go to Foo</router-link>
  <router-link :to="{name:'user',params:{id:3}}" tag="a" >张三</router-link>
</menu>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

-----------------------------------------------------------------------------------------------------------------------------------------------

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `,
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  methond:{
    nav:function(){
      // 编程式的导航
      router.push('home')  // 字符串
      router.push({ path: 'home' }) // 对象
      router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由
      router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数
      router.go(-1) // 返回上一个历史记录路由
      router.replace(n) // 替换当前路由（不会产生历史记录）
    }
  }
}