在脚手架使用Vue Router路由管理器

1 路由 - 介绍
（1）前端路由的本质, 对url的hash值进行改变和监听，切换挂载点的component组件
（2）vue 中的路由 : 是 hash 和 component 的对应关系, 一个哈希值对应一个组件
2.利用Vue Cli创建项目
注意： 需要在全局配置Vue Cli

npm install -g @vue/cli
或
yarn global add @vue/cli

(1) 创建项目
在想要创建项目文件夹的地方输入cmd唤醒命令窗口

vue create xxxx(文件名) 

（2）选择vue版本 我这里是vue2 接下来等待文件夹创建结束即可

(3) 输出 此命令进入文件夹

3.使用路由
3.1在src/views/创建组件（为路由做准备）
3.2 安装路由
(1) 在窗口输入命令

yarn add vue-router
或
npm i vue-router

这样就是成功了 没有的话就是可能输入错误仔细检查一遍

(3)在main.js里面引入

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

// 组件
import MyAbout from './views/MyAbout'
import MyHome from './views/MyHome'
import MyMovie from './views/MyMovie..vue'

//  1. 引入路由
import VueRouter from 'vue-router'
//  2. 注册
Vue.use(VueRouter)
//  3. 定义规则
const routes = [
  {
    path: "/home",
    component: MyHome
  },
  {
    path: "/movie",
    component: MyMovie
  },
  {
    path: "/about",
    component: MyAbout
  }
]
// 4.创建路由对象 -  传入规则
const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

new Vue({
  // 5. 关联到vue实例
  router,
  render: h => h(App),
}).$mount('#app')

(4)在需要切换的位置加载路由放置标签,
利用router-link标签的to属性来改变hash值切换路由

<template>
  <div id="app">
    <router-link to="/home">主页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
}
</script>

<style>
</style>

重定向属性

以上就是路由的基本使用