1.安装router：
打开文件夹在路径栏里面输入cmd 打开cmd命令行
输入vue create router-pro
选择下面选项
按下键选择路由并回车：
选择vue2版本
问你是否使用路由的历史模式：
输入n
问你eslint的语法规范选择哪种？
我们选择第一个最基本的格式校验
下面问你什么时候校验语法规范？
我们选择保存的时候校验选择第一个
问是否采用最基本的校验更新到package文件？
默认选择第一个回车
问你是否配置好了？输入y
还会跳出一个选项你可以输入y 回车 也可以直接回车
2.router安装,详解,二级配置,锚链接跳转
★router文件下的index.js文件：
/* 导入Vue构造函数 */
import Vue from 'vue'
/* 导入路由VueRouter构造函数 */
import VueRouter from 'vue-router'
/* 导入HomeView页面 */
import HomeView from '../views/HomeView.vue'
//调用构造函数Vue的use方法 传入VueRouter构造函数
//作用是把VueRouter作为一个插件 全局插入到Vue中
Vue.use(VueRouter)
/* 定义一个路由数组对象 */
const routes = [
/* 一个对象就对应了一个路由
path就是路由的地址
name给路由起的名字
component 具体跳转的页面
*/
{
/* path: '/' 根页面,表示已进入就显示的页面 */
path: '/',
name: 'home',
/* 这种方式一进入页面就会全部加载,不是用到的时候再加载
性能没有懒加载的方式好 */
component: HomeView,
/* 可以使用redirect 重定向 已进入主页就展示第一个子页面
redirect 后面跟的是路径名 并不是name */
/* 因为/是根路径 所有可以直接写one */
redirect:'one',
children:[{
path:'one',
name:'one',
component: () => import('../views/OneView.vue')
}]
},
{
/* 这里是一级目录所以可以加/ 表示根目录 */
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
/* 懒加载功能 : 一开始不加载,当你切换路由的时候再加载 */
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
/* about不是根路径 所以redirect后面要写全 '/about/aboutchild', */
redirect:'/about/aboutchild',
children:[{
path:'aboutchild',
name:'aboutchild',
component: () => import('../views/AboutChild.vue')
}]
},
{
path:'/ChildA',
name:'ChildA',
component: () => import('../components/ChildA.vue')
},
{
/* path:'*' 必须要放最后 */
/* path:'*' 表示上面的路由没有匹配到 则进入下面的页面 */
path:'*',
name:'notfound',
component: () => import('../components/NotFound.vue')
}
]
/* 实例化构造函数 VueRouter 产生一个实例化对象
并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter*/
const router = new VueRouter({
routes
})
/* 把实例化路由对象 router默认导出 */
export default router
main.js文件：
/* 导入Vue构造函数 */
import Vue from 'vue'
/* 导入App.vue入口页面 */
import App from './App.vue'
/* 导入router文件夹中的index.js中的router实例化对象 */
/* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router */
import router from './router'
/* 生产提示 */
/* 改成false是用来关闭开发者提示 */
Vue.config.productionTip = false
/* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')
都是用来挂载到id为#app的div上的*/
/* 把路由实例化对象router配置在Vue中,作用是保证项目中
所有的vue文件都可以使用router路由的属性和方法 */
new Vue({
router,
/* 会把所有vue文件渲染到App组件上 */
render: h => h(App)
}).$mount('#app')/* 等同于 el:"#app" */
viwes文件下：
App.vue文件：
AboutView.vue文件：
This is an about page
AboutChild.vue文件：
AboutChild
HomeView.vue文件：
KW47冲冲冲
OneView.vue文件：
我是ONEVIwe
components文件下：
ChildA.vue文件：
我是CHildA
ChildB.vue文件：
我是ChildB
NotFound.vue文件:
我是notfound