Vue(十)---路由

　　Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

需要引入vue-router.js

1.基本介绍：

https://www.cnblogs.com/superlizhao/p/8527317.html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <div class="menu">
        <!--
            router-link 相当于就是超链
            to 相当于就是 href
        -->
        <router-link to="/user">用户管理</router-link>
        <router-link to="/product">产品管理</router-link>
        <router-link to="/order">订单管理</router-link>
    </div>
     
    <div class="workingRoom">
        <!--
            点击上面的/user,那么/user 对应的内容就会显示在router-view 这里
         -->
         <router-view></router-view>   
    </div>
 
</div>
<script>
    /*
    * 申明三个模板( html 片段 )
    */
    var user = { template: '<p>用户管理页面的内容</p>' };
    var second = { template: '<p>产品管理页面的内容</p>' };
    var order = { template: '<p>订单管理页面的内容</p>' };
    /*
    * 定义路由
    */
    var routes = [
        { path: '/', redirect: '/user'}, // 这个表示会默认渲染 /user，没有这个就是空白
        { path: '/user', component: user },
        { path: '/product', component: second },
        { path: '/order', component: order }
    ];
    /*
    * 创建VueRouter实例
    */
    var router = new VueRouter({
        routes:routes
    });
    /*
    * 给vue对象绑定路由
    */
    new Vue({
        el:"#app",
        router
    })
 
</script>

 

 

2.传递参数

 

　　　　　　　　　　　　<div id="app">
			<div class="menu">
				<!--
					router-link 相当于就是超链，to 相当于就是 href
				-->
				<router-link to="/home">首页</router-link>
				<router-link to="/about">关于</router-link>
				<router-link to="/user/哒哒哒">用户</router-link>
				<router-link to="/user/哒哒哒2?age=20&sex=man">用户2</router-link>
			</div>
			<div>
				<router-view></router-view>
				
			</div>
			
　　　　　　　　　　</div>
		<script src="js/vue.js"></script>
		<script src="js/vue-router.js"></script>
		<script src="js/main.js"></script>

　　main.js

var route=[
	{
		path:'/',
		redirect:'/home'
	},
	{
		path:'/home',
		component:{
			template:`
			<div>
				<h1>HOME</h1>
			</div>
			`
		}
	},
	{
		path:'/about',
		component:{
			template:`
				<div>
					<h1>ABOUT</h1>
				</div>
			`
		}
	},
	{
		path:'/user/:namee',
		component:{
			template:`
				<div>
					<h2>姓名：{{$route.params.namee}}</h2>
					<h2>age：{{$route.query.age}}</h2>
					<h2>sex：{{$route.query.sex}}</h2>
				</div>
			`
		}
	}
	]

var router=new VueRouter({
	routes:route
})

new Vue({
	el:'#app',
	router:router
})

　　

 

 

this.route.query和this.route.params & query传参和params传参的使用和区别,这篇文章写的很详细

https://www.php.cn/js-tutorial-406276.html

 

 

3.子路由：

 

<div id="app">
			<div class="menu">
				<!--
					router-link 相当于就是超链，to 相当于就是 href
				-->
				<router-link to="/home">首页</router-link>
				<router-link to="/about">关于</router-link>
				<router-link to="/user/哒哒哒">用户</router-link>
				<router-link to="/user/哒哒哒2?age=20&sex=man">用户2</router-link>
			</div>
			<div>
				<router-view></router-view>
				
			</div>
			
		</div>
		<script src="js/vue.js"></script>
		<script src="js/vue-router.js"></script>
		<script src="js/main.js"></script>

　　main.js

var route=[
	{
		path:'/',
		redirect:'/home'
	},
	{
		path:'/home',
		component:{
			template:`
			<div>
				<h1>HOME</h1>
			</div>
			`
		}
	},
	{
		path:'/about',
		component:{
			template:`
				<div>
					<h1>ABOUT</h1>
				</div>
			`
		}
	},
	{
		path:'/user/:namee',
		component:{
			template:`
				<div>
					<h2>姓名：{{$route.params.namee}}</h2>
					<h2>age：{{$route.query.age}}</h2>
					<h2>sex：{{$route.query.sex}}</h2>
					<router-link v-bind:to="'/user/'+$route.params.namee+'/more'">more</router-link>
					<router-view></router-view>
				</div>
			`
		},
		children:[
			{
				path:'more',//以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了

				component:{
					template:`
						<div>
							姓名：{{$route.params.namee}}
						</div>
						`
				}
			}
		]
	}
	]

var router=new VueRouter({
	routes:route
})

new Vue({
	el:'#app',
	router:router
})

　　点击more时，显示子路由内容