Vue路由实现原理
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。通过改变浏览器地址URL,在不重新请求页面的情况下,更新页面视图 有两种方式:1.一种是# hash , 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2.一种是h5的history , 使用URL的Hash来模拟一个完整的URL 当打包构建应用时,Javascript 包会变...
·
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。
通过改变浏览器地址URL
,在不重新请求页面的情况下,更新页面视图
有两种方式:
1.一种是# hash , 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航
2.一种是h5的history , 使用URL的Hash来模拟一个完整的URL
当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter
vue-router
是Vue.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
}
]
})
更多推荐
已为社区贡献18条内容
所有评论(0)