vue-router的安装和使用

一、在开发中可以先安装cnpm提高开发效率

cnpm install比npm install快，一般安装在全局:
npm install -g cnpm --registry=https://registry.npm.taobao.org

但是通过vue init webpack projectName新建项目是和淘宝镜像没关系的，因为vue-cli 用的是 npm 源，所以只要设置 npm 源就行了，可以提升创建速度：

npm config set registry https://registry.npm.taobao.org

新建项目:
vue create .
或者
vue create 项目名称（英文）

二、安装和配置vue-router

步骤 一：
推荐安装稳定版本 vue-router@3.5.2
看自己需求可安装不同版本：

npm install vue-router@3.5.2 --save

步骤二：

配置路由

第一步：导入路由对象，并且调用Vue.use(VueRouter)

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例
src---->router---->index,js

//引入、配置路由的相关信息
import Vue from 'vue'
import VueRouter from 'vue-router'
//1.Vue.use安装插件
Vue.use(VueRouter)
const routes =[
//.....
]
//2.创建路由对象
const router = new VueRouter({
     //配置路由与组件的关系
     routes,

})
//3.将router对象导出
export default router

src ----->main.js

import Vue from 'vue'
import App from './App.vue'
//引入路由对象
import router from './router' 
Vue.config.productionTip = false

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

三、使用Vue-Router

第一步：创建路由组件

第二步：配置路由映射：组件和路径映射关系

第三步：使用路由:通过< router-view >

src---->router---->index,js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//路由懒加载，加载页面路径
const HomePage = () => import( /* webpackChunkName: 'HomePage' */ '@/views/HomePage')
const ShopData = () => import( /* webpackChunkName: 'ShopData' */ '@/views/ShopData')
//配置路由数组对象
const routes =[{
    //redirect重定向
    path: '/', 
    redirect: '/HomePage',
},
{
    path: '/HomePage',
    name: 'HomePage',
    component: HomePage
},
{
    path: '/ShopData',
    name: 'ShopData',
    component: ShopData
},
]
const router = new VueRouter({
    mode:'hash',
    routes,
})
export default router

App.vue

<template>
  <div id="app">
    <!--  使用router-view组件进行路由管理 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>