vue router + vue生命周期

最新推荐文章于 2024-08-18 16:55:31 发布

assiany

最新推荐文章于 2024-08-18 16:55:31 发布

阅读量352

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/assiany/article/details/119839863

版权

本文介绍了Vue Router的使用，包括路由守卫如全局前置守卫beforeEach、路由独享守卫beforeEnter以及组件内的beforeRouteEnter等。同时详细阐述了Vue组件的生命周期，包括beforeCreate、created、mounted、beforeUpdate、updated、beforeDestroy和destroyed等关键阶段。

摘要由CSDN通过智能技术生成

vue router + vue生命周期

路由 router

vueJs的路由，Vue Router，它是VueJs 官方的路由管理器

router-view，在概念上，它是一个容器，用来显示router对象中所设置的路由中的组件。

在vueJs当中，链接跳转，使用跳转页面

/*App.vue*/ 
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
   
  name: 'App'
}
</script>
/*  main.js */
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
   
  el: '#app',
  router,
  components: {
    App },
  template: '<App/>'
})
/* router/index.js */
import Vue from 'vue'
import Router from 'vue-router'
import mainWrap from '@/components/mainWrap'
import list from '@/components/list'
import about from '@/components/about'
import page1 from '@/components/page/page1'
import page2 from '@/components/page/page2'
import page3 from '@/components/page/page3'
Vue.use(Router)
export default new Router({
   
	routes: [
		{
   	
			path: '/',
			name: 'mainWrap',
			component: mainWrap 
		},
		{
   
			path: '/list',
			name: 'list',
			component: list,
			// children，当前的子路由 
			children:[
				{
   	
					path: '/page1',
					component: page1 
				},{
   	
					path: '/page2',
					component: page2 
				},{
   	
					path: '/page3',
					component: page3 
				}
			]
		},{
   	
			path: '/about',
			name: 'about',
			component: about 
		}
	]
})
/* MainWrap.vue*/
<template>
	<div>
		<h1> {
   {
   msg}} </h1>
		<p><router-link to='/list'>跳转到list页面</router-link></p>
		<p><router-link to='/about'>跳转到 about 页面</router-link></p>
	</div>
</template>
<script>
export default{
   
	name:'mainWrap',
	data(){
   
		return {
   
			msg:'路由-demo-首页'