vue 路由管理01

vue的路由管理

1.路由的基本使用

1.导入vue.js 导入vue-router.js
2.添加路由连接 <router-link to=' hash地址 '></router-link> 默认router-link 或被渲染成一个 a 标签 to 属性渲染为 href 属性
3.添加路由的占位符 <router-view></router-view>
4.定义路由组件
5.配置路由的规则
6.在vue 实例上挂载路由规则

html代码

<div id="app">
		<router-link to="/user">用户</router-link>
		<router-link to="/register">注册</router-link>
		<router-view></router-view>
</div>

js

<script>
		//定义用户组件
		const User = {
			template:'<div>用户组件</div>'
		}
		//定义注册组件片段
		const Register = {
			template: '<div>注册组件</div>'
		}
		//配置路由规则
		const router = new VueRouter({
			routes: [
				{path: '/',redirect: '/user'},
				{path: '/user',component: User},
				{path: '/register',component: Register}
			]
		})
		//挂载路由实例
		const vm =  new Vue({
			el: '#app',
			data:{
				msg: '123'
			},
			router: router//es6 属性名和值相同可以简写 写一个
		})
	</script>

主: redirect 这里面是路由重定向

2.嵌套路由的基本使用

html代码

<div id="app">
		<router-link to="/user">用户组件</router-link>
		<router-link to="/register">注册组件</router-link>
		<router-view></router-view>
</div>

js代码:

<script>
	const User = {
		template: `<div>
			<h1>用户组件<h1>
		<div>`
	}
	const Tab1 = {
		template: '<div>tab1</div>'
	}
	const Tab2 = {
		template: '<div>tab2</div>'
		
	}
	const Register = {
		template: `<div>
			<h1>注册组件</h1>
			<hr />
			<router-link to='/register/tab1'>组件1</router-link>
			<router-link to='/register/tab2'>组件2</router-link>
			<router-view></router-view>
		</div>`
	}
	const router = new VueRouter({
		routes:[
			{path: '/user',component: User},
			{
				path: '/register',
				component: Register,
				children:[
					{path: '/register/tab1',component: Tab1},
					{path: '/register/tab2',component: Tab2}
				]
			},
		]
	})
	new Vue({
		el: '#app',
		router,
		
	})
</script>

3.路由的参数传递

3.1 基本的参数传递

html代码:

<div id="app" >
		<router-link to="/user/1">user1</router-link>
		<router-link to="/user/2">user2</router-link>
		<router-view></router-view>
	</div>

js代码:

<script>
		const User = {
			template: `<div>User 组件 参数打印----{{ $route.params.id }}</div>`
		}
		const router = new VueRouter({
			routes: [
				{ path: '/user/:id', component:User },
			]
		})
		const vm =  new Vue({
			el: "#app",
			data: {
				
			},
			router	
		})
	</script>

3.2.使用props接收参数:

props: 可以是一个boolea 值 可以是一个对象 可以是一个函数

3.2.1 演示props boolea值

html代码:

<div id="app">
		<router-link to="/user/1">User1</router-link>
		<router-link to="/user/2">User2</router-link>
		<router-view></router-view>
</div>

js 代码:

<script>
		const User = {
			props:['id'],
			template: "<div>组件1----- {{ id }}</div>"
		}
		const router = new VueRouter({
			routes: [
				{ path: '/user/:id',component: User, props:true }
			]
			
		})
		const vm = new Vue({
			el: '#app',
			data:{},
			router
		})
	</script>

3.2.1 演示props 静态对象方式

html 代码：

<div id="app">
		<router-link to="/user/1">User1</router-link>
		<router-link to="/user/2">User2</router-link>
		<router-view></router-view>
</div>

js代码:

<script>
		const User = {
			props:['name','id'],
			template: `<div>User 组件 {{ uname + ' -- ' + age + ' -- ' + id }}
			 </div>`
		}	
		const router = new VueRouter({
			routes: [
				{
					name: 'user',
					path: '/user/:id',
					component: User,
					props: {id: 1,name:'123'}
				}
			]
			
		})
		const vm = new Vue({
			el: '#app',
			router,
		})
	</script>

3.2.1 演示props 函数方式 可以接收动态参数

html 代码：

<div id="app">
		<router-link to="/user/1">User1</router-link>
		<router-link to="/user/2">User2</router-link>
		<router-view></router-view>
</div>

js代码:

<script>
		const User = {
			props:['name','id','id2'],
			template: `<div>User 组件 {{ name + ' -- ' + id + '----' + id2 }}
			 </div>`
		}	
		const router = new VueRouter({
			routes: [
				{
					name: 'user',
					path: '/user/:id',
					component: User,
					props: route=>({id: 1,name:'123',id2: route.params.id})
				}
			]
			
		})
		const vm = new Vue({
			el: '#app',
			router,
		})
	</script>