vue45 —— vue-router 安装使用，修改路由默认路径，修改hash—>history

三大框架的路由实现

• Angular： ngRouter
• React：ReactRouter
• Vue：vue-router

vue-router

vue-router是Vue.js官方的路由插件，
和vue.js是深度集成的，
适合用于构建单页面应用

基于路由和组件

• 路由用于设定访问路径，将路径和组件映射起来
• 在vue-router单页面应用中，页面路径的改变 就是 组件的切换

安装和使用

（使用脚手架时选了router，不用再次安装配置）

npm install vue-router --save

src文件夹下创建router文件夹，router下创建index.js文件–配置路由相关信息

在模块化工程中使用（因为是插件，所以可通过Vue.use()安装路由功能）

1. 导入路由对象，且调用Vue.use(VueRouter)
2. 创建路由实例，且传入路由映射配置
3. 在vue实例中挂载创建的路由实例

index.js：

// 配置路由相关信息
// 1. 导入路由
import VueRouter from 'vue-router'
// 导入Vue
import Vue from 'vue'

// 1.1 通过Vue.use(插件)，安装插件
// 导入Vue
Vue.use(VueRouter)

// 1.2 创建VueRouter对象
const router = new VueRouter({
  // 配置路径和组件之间的映射关系
  routes:[

  ]
})

// 1.3 将VueRouter实例传入到vue实例中
export default router

main.js：

import Vue from 'vue'
import App from './App'

// 导入vuerouter
import router from './router/index' //可以省略/index

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  // 挂载router
  render: h => h(App)
})

使用步骤

• 创建路由组件
• 配置路由映射：组件和路径映射关系
• 使用路由：通过<router-link> 和 <router-view>

Home.vue:

<template>
  <div>
    <h2>我是组件 home</h2>
    <p>。。家是小的国，国是大的家。。</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style>

</style>

About.vue:

<template>
  <div>
    <h2>我是组件 about</h2>
    <p>。。i 。。</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style>

</style>

index.js:

import Home from '../components/Home'
import About from '../components/About'

const routes = [
  {
    path:'/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

routes – 不是routers
path: '/xxx’

App.vue:

<template>
  <div id = 'app'>
    <router-link to='/home'>首页</router-link>
    <router-link to='/about'>关于</router-link>
    <router-view></router-view>
  </div>
</template>

to = '/xxx’

路由的默认路径

一打开网页就显示首页相关页面，而不用先点击

src - router - index.js：

{
    path: '/',
    redirect: '/home'
  },

redirect: 重定向

将默认的hash模式 改为 h5的history模式

src - router - index.js：

const router = new VueRouter({
  // 配置路径和组件之间的映射关系
  routes,
  mode: 'history'
})