vue框架Router(vue学习笔记)

vueRouter是什么？

Router是Vue.js 官方的路由管理器，就像你在家要上网必须要有一个路由器来输出wifi你通过wifi来上网，而Router可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

安装完vue-cli之后，我们的项目目录结构如下：

这是Router的位置

在package.json中我们能看到其版本号

 

这是其大致结构:

//配置路由器相关的信息
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
//通过vue.use（vue插件）安装插件
Vue.use(VueRouter)
//创建vueRouter对象
const routes = [
  {

    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    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')
  }
]
//配置组件和路由之间的应用关系
const router = new VueRouter({
  routes
})
//将router暴露出去将router对象能够传入到vue实例
export default router

注意router对象中path和component为必填属性，path表示的是路由地址，而component则表示路由对应的vue页面视图文件

就比如：

可以理解为只要在路由地址后面跟着“/” 号就会跳转到相应的页面HomeView

挂载到vue实例中 :

 使用路由

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

• <router-link>：该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签。
• <router-view>：该标签会根据当前的路径，动态渲染出不同的组件。

 router-link属性
to：用于指定跳转的路径
tag：tag可以指定<router-link>之后渲染成什么组件，比如我们下面的代码会被渲染成一个<li>元素，而不是<a> 。 如：<router-link to='/home' tag='li'>
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。