Skip to main content

路由

路由配置和使用​

配置路由信息

let routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/list',
    component: list
  }
]

let router = new VueRouter({
  routes: routes
})
let vm = new Vue({
  el: '#app',
  router
})

在 html 使用

<div id="app">
   <router-link to='/home' active-class='current'>首页</router-link>
   <router-link to='/list' tag='div'>列表</router-link>
   <router-view></router-view>
</div>

此外，vue-router 还可以通过一下方式配置动态路由

query传参 （问号传参） params传参 （路径传参）

路由懒加载​

Vue 项目中实现路由按需加载（路由懒加载）的 3 中方式：

// 1、Vue异步组件技术：
{
	path: '/home',
	name: 'Home',
	component: resolve => reqire(['path路径'], resolve)
}

// 2、es6提案的import()
const Home = () => import('path路径')

// 3、webpack提供的require.ensure()
{
	path: '/home',
	name: 'Home',
	component: r => require.ensure([],() =>  r(require('path路径')), 'demo')
}

路由守卫​

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

全局前置守卫​

常用于判断登录状态和菜单权限校验

router.beforeEach((to, from, next) => {
  let isLogin = sessionStorage.getItem('isLogin') || ''
  if (!isLogin && to.meta.auth) {
    next('/login')
  } else {
    next()
  }
})

to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

组件内的守卫​

beforeRouteEnter beforeRouteUpdate beforeRouteLeave

路由缓存 keepalive​

keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在 v 页面渲染完毕后不会被渲染成一个 DOM 元素。

<keep-alive>
  <router-view></router-view>
</keep-alive>

当组件在 keep-alive 内被切换时组件的 activated、deactivated 这两个生命周期钩子函数会被执行

  1. 使用参数include/exclude

include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>
<keep-alive exclude="c">
  <router-view></router-view>
</keep-alive>

include 属性表示只有 name 属性为 a，b 的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存。 exclude 属性表示除了 name 属性为 c 的组件不会被缓存，其它组件都会被缓存。 2. 使用$route.meta 的 keepAlive 属性 需要在 router 中设置 router 的元信息 meta

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

在 app.vue 进行区别缓存和不用缓存的页面

<div id="app">
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</div>

hash 和 history模式​

hash 模式：在浏览器中符号“#”，#以及#后面的字符称之为 hash，用 window.location.hash 读取。特点：hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用，hash 不会重加载页面。

history 模式：history 采用 HTML5 的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

hash 模式中（ http://localhost:8080#home），即使不需要配置，静态服务器始终会去寻找index.html并返回给我们，然后vue-router会获取 #后面的字符作为参数，对前端页面进行变换。

history 模式中，我们所想要的情况就是：输入http://localhost:8080/home，但最终返回的也是index.html，然后vue-router会获取 home 作为参数，对前端页面进行变换。那么在nginx中，谁能做到这件事呢？答案就是try_files。

参考​