Vue.js（六）

路由（用 Vue.js + Vue Router 创建单页应用）

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

url 地址和真实的资源之间的对应关系，就是路由。


路由分为前端路由和后端路由：
    1) 后端路由是由服务器端进行实现，并完成资源的分发
    2) 前端路由是依靠hash值(锚链接)的变化进行实现 


前端路由主要做的事情就是监听事件并分发执行事件处理函数。
核心实现依靠一个事件，即监听hash值变化的事件：

    window.onhashchange = function(){
      //location.hash可以获取到最新的hash值
     location.hash
    }

基本使用

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>


// 1. 定义 (路由) 组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }


// 2. 定义路由（每个路由应该映射一个组件）
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]


// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes
})


或者：
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/User'},
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })


// 4. 创建和挂载根实例。
const app = new Vue({
  router
}).$mount('#app')

路由嵌套

      const Register = {
        template: 
        `<div>
          <h1>Register 组件</h1>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          // children 数组表示子路由规则
          { 
            path: '/register', component: Register, 
                children: [
                    { path: '/register/tab1', component: Tab1 },
                    { path: '/register/tab2', component: Tab2 }
                ]
          }
        ]
      })

路由重定向

{path: '/', redirect: '/user'}

动态路由匹配

<router-link to="/user/1">User1</router-link>   // "/1"为参数
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>


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

routes: [
    { path: '/user/:id', component: User },
]


2.
const User = {
    props: ['id'],
    template: '<h1>{{id}}</h1>'
}

{ path: '/user/:id', component: User, props: true }


3. 此方法无法接收到id值（/user/:id无法接收）
const User = {
    props: ['id', 'name', 'age'],
    template: '<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>'
}

{ path: '/user/:id', component: User, props: { name: 'lisi', age: 20 } }


4.
const User = {
    props: ['id', 'name', 'age'],
    template: '<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>'
}

{
    path: '/user/:id',
    component: User,
    props: route => ({ name: 'zs', age: 20, id: route.params.id })
}

命名路由

<router-link :to="{ name: 'user', params: {id: 3} }">User</router-link> //params传递参数

const User = {
    props: ['id', 'name', 'age'],
    template: '<h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>'
}

routes: [
    { path: '/', redirect: '/user' },
    {
        // 命名路由
        name: 'user',
        path: '/user/:id',
        component: User,
        props: route => ({ name: 'zs', age: 20, id: route.params.id })
    }
]

编程式导航

声明式导航：通过点击链接实现导航的方式

编程式导航：通过调用JavaScript形式的API实现导航的方式

常用的编程式导航 API 如下：
    this.$router.push('hash地址')
    this.$router.go(n)


编程式导航 router.push() 方法的参数规则：
    // 字符串(路径名称)
    router.push('/home')
    // 对象
    router.push({ path: '/home' })
    // 命名的路由(传递参数)
    router.push({ name: '/user', params: { userId: 123 }})
    // 带查询参数，变成 /register?name=lisi
    router.push({ path: '/register', query: { name: 'lisi' }})


      const User = {
        props: ['id', 'name', 'age'],

        template: 
            `<div>
                <h1>id: {{id}} -- 姓名:{{name}} -- 年龄：{{age}}</h1>
                <button @click="goRegister">跳转到注册页面</button>
             </div>`,

        methods: {
          goRegister() {
            this.$router.push('/register')
          }
        },
      }


      const Register = {
        template: 
            `<div>
                 <h1>Register 组件</h1>
                 <button @click="goBack">后退</button>
             </div>`,

        methods: {
          goBack() {
            this.$router.go(-1)
          }
        }
      }

原文地址：https://www.cnblogs.com/loveer/p/11857303.html