vue2简易路由复习

Vue2简易路由实践：

在main.js内引入router.js文件，引入路由配置参数，createApp.use(router)

import Vue from 'vue'
import App from './App.vue'
import store from './store/modules'
import router from './router.js'

Vue.config.productionTip = false

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

Vue2中hash和history模式配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import PrevComp from './components/prev-comp'
import NextComp from './components/next-comp'

Vue.use(VueRouter)

const routes = [
  { path: '', redirect: '/PrevComp' },
  { path: '/PrevComp', name: 'PrevComp', component: PrevComp },
  { path: '/NextComp', name: 'NextComp', component: NextComp },
]

const router = new VueRouter({ 
  mode: 'hash',
  routes
})

export default router

默认hash模式，浏览器url链接会带#
在mode属性上定义hash和history。

两种路由模式优缺点

Hash:
默认路由模式；
这种模式可以避免服务器配置的问题，而且支持所有浏览器，由于 URL 中添加了 hash，因此在搜索引擎的 SEO 优化中存在一些问题。

History:
Url美观；
因为这种模式不好区分一个路由是前端路由还是后端路由，而浏览器默认认为是后端的，所以向后端的这个接口发请求，如果后台没有正确的配置，当用户在浏览器直接访问这个网址就会返回404。

如何去解决这种问题：

（官方语言：）所以呢，我们要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你app依赖的页面。