vue-route （一）

前言

本文先用一个例子来展示 vue-router 的基本的使用方法，然后重点介绍了路由组件传参和 history 与 hash 模式的使用

例子

我们先通过一个简单的例子看一些 vue-router 的基本使用方法

<div id="app">
  <router-link to='/home'>Home</router-link>
  <router-link to='/about'>About</router-link>
  <router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  const Login = {
    template: '<div background-color="blue">Login</div>'
  }
  const Home = {
    methods: {
      toMyInfo() {
        this.$router.push({
          path:  '/home/myInfo/knight',
          query: {
            age: 18,
          }
        });
      }
    },
    template: `
      <div @click="toMyInfo" background-color="blue">Home
        <router-view></router-view>
      </div>
      `
  }
  const MyInfo = {
    computed: {
      name() {
        return this.$route.params.name;
      },
      age() {
        return this.$route.query.age;
      }
    },
    template: `<div background-color="yellow">
      <div>MyInfo</div>
      <div> {{ name }}</div>
      <div>{{ age }}</div>
    </div>`
  }
  const About = {
    template: '<div>About</div>'
  }
  const router = new VueRouter({
    routes: [
      {
        path: '/',
        redirect: '/login',
      },
      {
        name: 'login',
        path: '/login',
        component: Login,
      },
      {
        name: 'home',
        path: '/home',
        component: Home,
        children: [
          {
            name: 'myInfo',
            path: 'myInfo/:name',
            component: MyInfo,
          }
        ]
      },
      {
        name: 'about',
        path: '/about',
        component: About,
      }
    ]
  })
  const vm = new Vue({
    el: '#app',
    router,
  })
</script>

路由组件传参

我们可以在 routes 配置项中配置 props: true 即可将 route.params 以 props 传入组件中

<div id="app">
  <router-view></router-view>
</div>
<script>
  const User = {
    props: ['id'],
    template: '<div>User {{ id }}</div>',
  }
  const router = new VueRouter({
    routes: [
      {
        path: '/user/:id',
        component: User,
        props: true
      }
    ]
  })
  const vm = new Vue({
    el: '#app',
    router,
  })
</script>

如果我们将 props 配置为对象，则会将我们配置的对象作为 props 传入子组件中

但此时 route.params 不会再作为 props 传入子组件中

<div id="app">
  <router-view></router-view>
</div>
<script>
  const User = {
    props: ['id', 'name'],
    template: '<div>User id: {{ id }} name: {{ name }}</div>',
  }
  const router = new VueRouter({
    routes: [
      {
        path: '/user/:id',
        component: User,
        props: { name: 'knight' }
      }
    ]
  })
  const vm = new Vue({
    el: '#app',
    router,
  })
</script>

我们还可以将 props 配置项配置为函数

这里我们可以看到 route 参数就是 this.$route 对象

<div id="app">
  <router-view></router-view>
</div>
<script>
  const User = {
    props: ['id', 'name', 'route'],
    computed: {
      aaa() {
        console.log(this.$props)
      }
    },
    template: '<div>User id: {{ id }} name: {{ name }} {{ aaa }}</div>',
  }
  const router = new VueRouter({
    routes: [
      {
        path: '/user/:id',
        component: User,
        props: route => ({ 
          name: route.query.name, 
          id: route.params.id,
          route: route,
        })
      }
    ]
  })
  const vm = new Vue({
    el: '#app',
    router,
  })
</script>

history 和 hash

vue-routre 默认的是 hash 模式，我们也可以配置为 histoory 来更改这个模式

<div id="app">
  <router-link to="/user">User</router-link>
  <router-view></router-view>
</div>
<script>
const User = {
  template: '<div>User</div>',
}
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      name: 'user',
      path: '/',
      component: User,
      alias: '/user'
    },
  ],
})
const vm = new Vue({
  el: '#app',
  router,
})
</script>

但是此时如果直接访问路由如 http://127.0.0.1:5500/user 将会出错

后台请求应该将所有请求的 url 都统一返回 index.html 页面