vue如何新建项目并配置标准路由-创新互联
这篇文章给大家分享的是有关vue如何新建项目并配置标准路由的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
为岳阳楼等地区用户提供了全套网页设计制作服务,及岳阳楼网站建设行业解决方案。主营业务为成都网站设计、成都网站建设、岳阳楼网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!配置路由所有用到的地方总共四步或者说四处
1.index.js(src--router--index.js)
import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Home from '@/components/layout/Home' import showuser from '@/components/t_dom_owner_user/showuser' import addusersfromother from '@/components/t_dom_owner_user/addusersfromother' import showresT from '@/components/t_dom_owner_resT/showresT' Vue.use(Router) export default new Router({ // routes: [ // { // path: '/', // name: 'Login', // component: Login // } // ] routes: [ { path: '/', name: 'Home', component: Home , children: [ { path: '/showuser', name: 'showuser', component: showuser, }, { path: '/showresT', name: 'showresT', component: showresT }] }, { path: '/addusersfromother', name: 'addusersfromother', component: addusersfromother }, ] })
2.main.js(src根目录下)
import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import router from './router' import 'element-ui/lib/theme-chalk/index.css'; import '../public/css/main.css' import store from '../store' Vue.config.productionTip = false; Vue.use(ElementUI); new Vue({ router, render: h => h(App), store, }).$mount('#app')
3.App.vue
注意App.vue里的
即对应index.js里配置的根路径http://localhost:8080/#,作为app.vue的入口页面
path: '/', name: 'Home', component: Home ,
4.其它应用路由的界面
比如showowner.vue
{{ data.data.ownerName}}
其中的嵌入式布局el-main里配置
然后是跳转路由写法,跳转到的界面是pathVariable,界面pathVariable就会显示在上面配置的el-main处
handleNodeClick(data) { console.log(data); //每次点击结点都要初始化ownerId this.domId = data.data.domId; this.ownerId = data.data.ownerId; this.varify(); this.$router.push({ path: this.pathVariable, query: { domId: this.domId, ownerId: this.ownerId } }); }
感谢各位的阅读!关于“vue如何新建项目并配置标准路由”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
文章标题:vue如何新建项目并配置标准路由-创新互联
标题网址:http://scyanting.com/article/pgioc.html