死亡笔记之2--vue-router安装和配置方式

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

vue-router是基于路由和组件的

• 路由用于设定访问路径,将路径和组件映射起来

• 在vue-router的单页面应用中,页面的路径的改变就是组件的切换

安装路由方法：

npm install vue-router

这个一般会在模块化工程中使用它，由于它是一个插件，所以可以通过Vue.use()来安装路由功能。

我们在src文件夹下面也可以看到有router文件夹。

router/index.js对router的引入：

//第一步,先引入
import VueRouter from 'vue-router'

//第二步,通过Vue.use(插件)
//想起Vue还没导入
import Vue from 'vue'
Vue.use(VueRouter)

const routers=[
    
]
// 第三步
const router=new VueRouter({
  //配置路由和组件之间的应用关系
  //routers:[]//第五步,把routers抽离到上面去
  routers
})
//第四步,去main.js中挂载,要去别的文件挂载,那么在这里就要把它导出
export default router

路由映射配置和呈现:

步骤：

1.创建路由组件

2.配置路由映射：组件和路径映射关系

3.使用路由：通过<router-link>和<router-view>