Vue路由的安装

1.npm安装路由  在项目中输入以下命令 安装全局路由

npm install vue-router -S

安装之后在项目文件package.json内会出现 "vue-router": "^3.5.2" 

2.在src内新建router目录 添加index.js作为总路由

// 引入依赖
import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用路由中间件
Vue.use(VueRouter)

// 懒加载引入组件
const index = () => import('../page/index.vue')

// 路由表
const routes = [{
    path: '/',
    component: index,
    meta: {
        title: '首页'
    }
}, ]


// 修改路由模式
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

//暴露
export default router

3. 在mian.js中引入刚刚改好的index.js文件 并添加到vue实例中

···
import router from './router'


···


new Vue({
  router:router,
  ···
}

4.在app.vue中添加路由出口 <router-view></router-view> 这是一个会变的组件 url不同 他就变成不同的组件 变化的规则就是路由表的内容

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->

    <!-- 路由视图图 -->
    <router-view></router-view>
  </div>
</template>

5.router和route的区别：

router是全局路由对象，负责全局事务，可以用来跳转等，除了routes还有其他的属性和方法

route是局部路由对象，当前页面或组件的路由，用来获取信息