前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。

通过改变浏览器地址URL在不重新请求页面的情况下,更新页面视图

 

有两种方式:


1.一种是# hash   ,    在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 
2.一种是h5的history  ,     使用URL的Hash来模拟一个完整的URL

 

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

 

利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter

vue-routerVue.js框架的路由插件,它是通过mode这一参数控制路由的实现模式的:

const router=new VueRouter({
    mode:'history',
    routes:[...]
})
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})

 

Logo

前往低代码交流专区

更多推荐