[30天 Vue学好学满 DAY22] Vue Router-1

Vue 官方所提供的路由，由於使用vue2，Vue Router 版本选择v3。

安装

// npm 
npm install vue-router

应用

新增route.js
设定path: '/' -> 可视为 http://localhost:8080/ 首页

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

// 使用 vue-router
Vue.use(VueRouter)

// 汇出 vue-router 设置
export default new VueRouter({
    routes: [
        {
            name: 'helloWorld',   //组件呈现名称
            path: '/',     //对应路径
            component: HelloWorld //对应组件
        },
    ] 
})

於main.js引入

import router from './route/route.js'

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

router-view

於HTML中加上 <router-view>，并使用<router-link>定义连结。

将标签置入专案入口App.vue

<div id="app">
    <!-- <router-link> 默认为 <a> 标签 -->
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/todo" style="margin-left:10px">待办事项</router-link>
    </p>

    <!-- 实际渲染位置 -->
    <router-view></router-view>
  </div>

将HelloWorld前端调整

<h1>
    我是首页
</h1>

起前端测试

History

可以看到网址中存在# ，是因为Vue-Router预设为hash mode。

Hash mode

锚点，#後为网页中某位置，#後跳转不会触发整个网页的重新载入，且会将跳转纪录於浏览器历史中(可回上一页、切换至下一页)。

History mode

来自於HTML5对History API的扩充，可透过新增的pushState()、replaceState()函数更新URL，也可透过原有go()、back()实现上下页。

於route.js开启History mode

export default new VueRouter({
    mode: 'history', //History mode
    routes: [
        {
            name: 'helloWorld',   //组件呈现名称
            path: '/',     //对应路径
            component: HelloWorld //对应组件
        },
    ] 
})

重起前端检视网址

<!-- Hash mode -->
http://localhost:8080/#/
<!-- History mode -->
http://192.168.1.107:8080/

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://book.vue.tw/CH4/4-1-vue-router-intro.html