一、插件安装

npm i vue-router

二、基本使用

//入口文件main.js
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

new Vue({
router,
render:(h) =>h(App)
}).$mount("#app")

如何根据地址中的路径选择不同的组件？
把选择的组件放到哪个位置？
如何无刷新切换组件

vue-router是全局组件 RouterView不需要重新注册

//入口文件main.js
import Home from "./views/Home"
const router = new VueRouter({
//配置
routes:[path:"/",component:Home]//路径和对应的组件
})

<!--App.vue-->
<div>
<RouterView />//匹配到的组件会渲染到这里
</div>

哈希地址

当前地址：#/Home
location.hash = "#/blog" 当前地址：#/blog

三、路由模式

默认是hash获取路径：从浏览器地址栏hash获取，改变的是hash部分
history:从浏览器地址栏location.pathname获取,改变H5 histor API
abstract:从内存中获取

//入口文件main.js
import Home from "./views/Home"
const router = new VueRouter({
 //配置
 routes:[path:"/",component:Home]//路径和对应的组件
 //路由模式
 mode: "history",
})

四、导航

普通的 a元素点击会刷新页面
vue-router提供了全局的组件 RoterLink 渲染结果是 a元素
内部注册了点击事件，阻止默认行为

<RoterLink to="/blog">文章</RoterLink>
<!--mode:hash-->
<a href="#/blog">文章</a>
<!--mode:history-->
<a href="/blog">文章</a>

五、激活状态

选中效果切换怎么做？
当前路径和导航路径（a元素路径）匹配
两路径匹配则 a元素类样式 router-link-active
两路径精确匹配：a元素类样式 router-link-exact-active
利用精确匹配规则设置激活状态的类样式

<RoterLink exact to="/blog">文章</RoterLink>exact是一个布尔值表示必须要精确匹配才有router-link-active的类样式

六、命名路由

使用命名路由可以解除系统与路径之间的耦合

// 路由配置
const router = new VueRouter({
  routes: [ // 路由规则
    // 当匹配到路径 /foo 时，渲染 Foo 组件
    { name:"foo", path: '/foo', component: Foo },
    // 当匹配到路径 /bar 时，渲染 Bar 组件
      { name:"bar", path: '/bar', component: Bar }
  ]
})

<!-- 向to属性传递路由信息对象 RouterLink会根据你传递的信息以及路由配置生成对应的路径 -->
<RouterLink :to="{ name:'foo' }">go to foo</RouterLink>

vue插件之router