node环境vue-cli脚手架和webpack搭建vue-router配置路径跳转

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了node环境vue-cli脚手架和webpack搭建vue-router配置路径跳转，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2034字，纯文字阅读大概需要3分钟。

内容图文

App.vue

<template>
  <div id="app">
  	 这是app.vue主页标题
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

　　router文件夹下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import Learn from '@/components/learn'
import Page from '@/components/page'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',    //根路径
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/learn',
      name: 'learn',
      component: Learn,
      children: [{
     	  path: '/page',  //子路由配置
     	  name:'page',
          component: Page,
          }
      ]
    }
  ]
})

　HelloWorld路由页面

<template>
  <div class="hello">
    <h4>{{ msg }}</h4>
    <h4>我是HelloWorld页面</h4>        
    <router-link to="/learn">我是路由，点我跳转二级路由页面</router-link>
    </br>      
    </br>
    <a @click="gopage">用js跳转learn页面</a>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
	  data () {
	    return {
	      msg: '这是嵌入app.vue主页面的第一级的router页面'
	    }
	  },
	  methods:{
	  
	  		gopage(){
	  		
				  		//跳转到上一次的页面
					    //this.$router.go(-1)
					 
					    //指定跳转的地址
					    //this.$router.replace('/learn')
					 
					    //指定跳转路由的名字下
					    //this.$router.replace({name:'learn'})
					 
					    //通过push进行跳转
					    //this.$router.push("/learn");
					    this.$router.push({name:'learn'})
	  		}
	  
	  
	  }
}
</script>

<style scoped>
 h3 {
  font-weight: normal;
  color:blue;
}
a{
	color:#42b983;

}
</style>　　

　learn路由页面

<template>
  <div class="learn">
    <h3>{{ msg }}</h3>
    <h3>我是learn页</h3>
    <router-link to="/page">我是路由，点我跳转子页面</router-link>   
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'learn',
  data () {
    return {
      msg: '我是指定跳转的地址router页面'
    }
  }
}
</script>

<style scoped>
 h3 {
  font-weight: normal;
  color: #42b983;
}

</style>

　　learn下的子路由page页面

<template>
  <div class="page">
    <h3>{{ msg }}</h3>
    <h3>我是page页面</h3>
  </div>
</template>

<script>
export default {
  name: 'page',
  data () {
    return {
      msg: '我是嵌入的子页面'
    }
  }
}
</script>

<style scoped>
 h3 {
  font-weight: normal;
  color: #42b983;
}

</style>

　　

内容总结

以上是互联网集市为您收集整理的node环境vue-cli脚手架和webpack搭建vue-router配置路径跳转全部内容，希望文章能够帮你解决node环境vue-cli脚手架和webpack搭建vue-router配置路径跳转所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---