Day 22 - Vue Router基本概念(2)

假设我们已经建立了vue cli的project，只要引入对应的vue router package就可以使用了。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {
      name: '元件的名称',
      path: '路径',
      component: 'import元件的物件'
    },
  ] 
})

import router from '刚刚处理路由的js档'
new Vue({
  el: '#app',
  template: '<App/>',
  router
})

上面的程序码中，我们透过export router，就可以在main.js这个应用程序的路口进行全域引用。

router-view & router-link

import One from '@/components/One'
import Two from '@/components/Two'
export default new VueRouter({
  routes: [
    {
      path: '/One',
      component: One
    },
    {
      path: '/Two',
      component: Two
    }
  ]
})
<!-- App.vue -->
<script>
import One from '@/components/One'
import Two from '@/components/Two'
export default {
  components: {
    One,
    Two
  }
}
<script/>
<template>
  <div>
    <nav>
      <router-link to="/One">One<router-link/>
      <router-link to="/Two">One<router-link/>
    <router-view/>
  <div>
<template/>

import完之後，我们在透过router view及 router link渲染路由对应的组件。
router-link会负责切换路径的连结。

这是最基本的路由切换，不过我们在写网页时并不会是这麽简单的状况，我们常常看到url上会显示
xxx/xxx/1
或是
xxx/xxx?id=xxx

路由的1或是id後面的xxx都是动态传入的参数，就不能hard code了，这种状况我们明天再介绍。