大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

其中的嵌入式布局el-main里配置,意味着在本界面showowner.vue触发路由将要跳转的位置,即要跳转到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://dzwzjz.com/article/pgioc.html
在线咨询
服务热线
服务热线:028-86922220
TOP