vue2 关于 router 的使用

步骤一：

npm i vue-router@3.2.0

后面版本号可以改成你需要的版本

步骤二：

在跟组件创建router 文件夹 下面在创建 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '*',
    redirect: '/film'
  },
  { path: '/film', component: () => import('../views/Film') },
]

export default new VueRouter({
  routes,
  mode: 'hash'
})

模式一：mode: ‘hash’
hash —— 即地址栏 URL 中的 # 符号

 

 模式二：mode: ‘history’,

 

一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来不美观。

使用 history 模式时，URL 就像正常的 url，不过这种模式还需要后台配置支持。

原因：

1、后台配置支持是否支持：history，是需要后台配置支持的。原理是要在服务端增加一个覆盖你的路由内所有情况的候选资源，如果 URL 匹配不到任何候选资源，则定位到打包好的 index.html 页面，这个页面就是你 app 依赖的页面。
后端配置链接：https://router.vuejs.org/zh/guide/essentials/history-mode.html
 

步骤三:

在main.js 把 router注册成全局

import router from './router'