vue-router 路由的基本使用

功能：所有的功能都在一个页面

优点 ： 不刷新 用户体验 开发效率高

缺点 ： 学习成本高 首次加载速度慢 不利于seo 解决方案(ssr) nuxt

使用方法：

1. 下载 vue-router

2. 引入 import VueRouter from 'vue-router'

3. 注册 Vue.use(VueRouter) 两个全局组件 router-view 和 router-link

4. 定义规则 const routes = [ { path: '/find', component: Find }, ... ]

5. 生成路由实例 const router = new VueRouter({ routes: routes })

6. 把路由实例 挂载到vue上 new Vue({ router: router })

7. 设置挂载点 <router-view />

声明式导航

router-link 属性 to 表示要跳转的路径

优点： 提供了两个类名 很容易实现高亮效果

404页面的配置

最好把该项配置放在配置表末尾 不过在vue-router内部会自动把此项放到末尾 定义一个NotFound文件即可

{ path: '*', component: NotFound }

路由两种模式

1. hash模式 hashchange事件

2. history模式 replaceState 替换当前的历史记录 不会形成历史记录栈 pushState 会形成历史记录栈

路由的嵌套

在一级路由配置项中定义children属性配置二级路由

{ path: '/find', component: Find, name: 'Find',

 children: [ { path: 'ranking', component: Ranking, 

  } ] },

 需要在一级路由页面指定二级路由渲染出口注意！！！