05-Vue路由

九. 路由

9.1 路由的介绍

1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现
3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

9.2 路由的基本使用

！！！ 第一步要导包 ！！！
注意;vue-router.js 依赖于 vue.js 所以要注意顺序

<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>

html代码:

<router-link to="/login" tag="button">登录</router-link>
<router-link to="/register" tag="button">注册</router-link>
<!-- vue-router 提供的占位符 显示相对应得组件 -->
<router-view></router-view>

router-link ,router-view 都是vue-router 提供的元素
两个跳转的组件：

var login ={
		// template:'<h1>登录组件---{{$route}}---{{$route}}</h1>',
		template:'<h1>登录组件</h1>',
		created(){
		// console.log(this.$route.params.name)
	}
}

var register ={
			template:'<h1>注册组件</h1>'
}

路由:

var routerObj=new VueRouter({
	//routers  --> 【路由匹配规则】
	routes:[
	//每一个路由匹配规则都是一个对象 都具有两个属性
	//path ：监听哪个路由的链接地址
	//component :表示如果路由匹配到的 path ，则展示component指定的组件
	//重定向:redirect  默认路径显示  路径为‘’的组件		
	{path:'/' ,redirect:'/login'},
	{path:'/login',component: login},
	{path:'/register' ,component:register}
	]
})

vue代码:

var vm =new Vue({
	el:'#app',
	data:{},
	methods:{}，
	router:routerObj
})

9.3 路由的传值

9.3.1 query 传值

html代码:

<router-link to="/login?id=10&name=zc" tag="button">登录</router-link>

组件:

var login ={
	 template:'<h1>登录组件---{{$route.query.id}}---{{$route.query.name}}</h1>',
	created(){
		  console.log(this.$route.query)
	}
}	

9.3.2 params 传值

html代码:

<router-link to="/login/18/zc" tag="button">登录</router-link>
<router-link to="/register" tag="button">注册</router-link>
<!-- vue-router 提供的占位符 显示相对应得组件 -->
<router-view></router-view>

vue代码:

var login ={
	template:'<h1>登录组件----{{$route.params.id}}---{{$route.params.name}}</h1>',
	created(){
		console.log(this.$route.params)
	}
}
//路由
var routerObj=new VueRouter({
	routes:[
		{path:'/' ,redirect:'/login'},
		{path:'/login/:id/:name',component: login},
		{path:'/register' ,component:register}
  ]
})

9.4 设置路由高光

css代码:

/* 实现路由高亮 */
.router-link-active{
	color: red;
	background: skyblue;
}
.myactive{
	color: blue;
	background: red;
}

路由:

var routerObj=new VueRouter({
	routes:[
		{path:'/' ,redirect:'/login'},
		{path:'/login/:id/:name',component: login},
		{path:'/register' ,component:register}
	],
	//自定义一个active-class
	linkActiveClass:'myactive'
})

9.5 路由的嵌套

html代码:

<div id="app">
			<router-link to="/account" tag="button">account</router-link>
			<router-view></router-view>
		</div>
		
		<template id="tem">
			<div>
				这是你要看的组件
				<router-link to="/account/login" tag="button">登录</router-link>
				<router-link to="/account/register" tag="button">注册</router-link>
				<router-view></router-view>
			</div>
		</template>

vue代码:

var account={
	template:'#tem'
}
		//组件模块对象
var login ={
	template:'<h1>登录组件</h1>'
}
		
var register ={
	template:'<h1>注册组件</h1>'
}
		
		//创建一个路由对象
var routerObj=new VueRouter({
	//routers  --> 【路由匹配规则】
		routes:[
		{
		path:'/account',
		component:account,
		children:[
		{path:'login',component: login},
		{path:'register' ,component:register}
		]
		}
	]
})

var vm =new Vue({
			el:'#app',
			data:{},
			methods:{},
			//将路由注册到实例化对象中 用来监听url地址展示相对应的组件
			router:routerObj
})

9.6 命名路由

html代码:

 <div id="app">

    <router-view></router-view>
    <div class="container">
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>
    </div>

  </div>

vue代码:

 var header = {
      template: '<h1 class="header">Header头部区域</h1>'
    }

    var leftBox = {
      template: '<h1 class="left">Left侧边栏区域</h1>'
    }

    var mainBox = {
      template: '<h1 class="main">mainBox主体区域</h1>'
    }
     var router = new VueRouter({
      routes: [
        /* { path: '/', component: header },
        { path: '/left', component: leftBox },
        { path: '/main', component: mainBox } */


        {
          path: '/', components: {
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
})
var vm =new Vue({
			el:'#app',
			data:{},
			methods:{},
			router:router
})