vue2路由vue-router配置的示例分析
小编给大家分享一下vue2路由vue-router配置的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联是一家专业提供大丰企业网站建设,专注与做网站、成都网站建设、H5网站设计、小程序制作等业务。10年已为大丰众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
vue路由配置以及按需加载模块配置
1、首先在component文件目录下写俩组件:
First.vue:
我是第一个页面
Second.vue:
我是第二个页面
2、router目录下的index.js文件配置路由信息:
import Vue from 'vue' import VueRouter from 'vue-router' /*import First from '@/components/First' import Second from '@/components/Second'*/ Vue.use(VueRouter) /*const routes = [ //重定向 { path:'/', redirect:'first' }, { path: '/first', name: 'First', component: First }, { path: '/second', name: 'Second', component: Second } ]*/ //懒加载路由 const routes = [ { //当首次进入页面时,页面没有显示任何组件;让页面一加载进来就默认显示first页面 path:'/', //重定向,就是给它重新指定一个方向,加载一个组件; component:resolve => require(['@/components/First'],resolve) }, { path:'/first', component:resolve => require(['@/components/First'],resolve) }, { path:'/second', component: resolve => require(['@/components/Second'],resolve) } //这里require组件路径根据自己的配置引入 ] //最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。 const router = new VueRouter({ routes }) export default router;
3、main.js中引入路由配置文件:
import $ from 'jquery' import Vue from 'vue' import App from './App' import router from './router' //引入路由配置文件 import './assets/css/bootstrap.min.css' import './assets/js/bootstrap.min' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, // 注入到根实例中 render: h => h(App) })
4、App.vue引入路由配置导航:
跳转第一个页面 跳转第二个页面
以上是“vue2路由vue-router配置的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享名称:vue2路由vue-router配置的示例分析
地址分享:http://pwwzsj.com/article/jhoojo.html