GSO (vue07)

Vue-rounter

前台路由，通过地址决定如何显示页面

基本使用方法

创建一个路由对象,new路由对象的时候,可以传递一个对象

var routerObj = new VueRouter({
			
			routes:[
				{path:'/login',component:login},
				{path:'/register',component:register}
			]
		})

• route表示路由匹配规则
• 每个路由规则都是一个对象,这个规则对象有两个必须的属性

1.path:表示监听那个路由链接地址

2.component:表示如果路由是前面提到的path,则展示component对应组件模板

简单的路由演示
写两个简单模板

var login = {
			template:"<h3>登录</h3>"
		}
var register = {
			template:"<h3>注册</h3>"
		}

创建路由对象

var routerObj = new VueRouter({
			
			routes:[
				{path:'/login',component:login},
				{path:'/register',component:register}
			]
		})

插入router-view标签（vue-router提供的元素，路由规则匹配到的组件会展示到router-view中去）

  <router-view></router-view>

此时在页面地址后加#/login可显示登录模板（可通过a标签改变地址）

<a href="#/login">登录</a>

推荐直接使用router-link标签

<router-link  to="/login"> 登录</router-link>

效果相同，且不用加“#”（会被默认渲染为a标签,可用tag属性自定义渲染为何种标签）

重定向

{path:'/',redirect:'/login'}

用以默认打开登录组件

路由高亮

被点击的 router-link 元素会获得router-link-exact-active和router-link-active两个类，可给两个类添加样式。
获得的类可以自己修改

  var routerObj = new VueRouter({
    			routes:[
    				{path:'/login',component:login},
    				{path:'/register',component:register}
    			]，
    			linkActiveClass:'myactive'
    		})
创建对象时linkActiveClass属性可修改router-link 元素被点击时获得的类名

路由传参数

query方法
在地址后用get方法添加数据

<router-link  to="/login?id=你好"> 登录</router-link>

在要渲染的模板中用this.$route.query接收（this可省略）

var login = {
			template:"<h3>登录{{$route.query.id}}</h3>",
			created(){//组件的生命周期钩子函数
				console.log(this.$route.query.id)
			}}

此方法路有规则中的path不变，仍为
{path:’/login’,component:login}
params方法
根据要的参数修改路由规则对象中的path

{path:'/login/:id',component:login}

此时地址添加数据方法为

<router-link  to="/login/鸟">

最后在要渲染的模板中用this.$route.params接收（this可省略）

 template:"<h3>登录{{$route.params.id}}</h3>"

此方法若访问地址中的数据与路由规则地址中的数据个数不一样则会匹配不上路由。像**/login/鸟/**这样后面只有斜杠将被视作只有一个参数“鸟”。

路由嵌套

路由嵌套据目前了解的大概作用就是让父路由规则渲染的模板保持存在的情况下通过子路由选择模板。
(视频讲解不全面,只能先学会怎么写）
例子
routes:[{path:’/account’,
component:{ template:"#tmp1"},
children:[ {path:‘login’,component:login},
{path:‘register’,component:register} ]
}]
tmp1为父路由的模板，它包含了子路由的router-view标签以及选择访问子路由地址的按钮。

<template id="tmp1">
			<div >
			<h1>这是Account组件</h1>
				<router-link  to="/account/login"> 登录</router-link>
				<router-link  to="/account/register"> 注册</router-link>
			    <router-view></router-view>
			</div>
		</template>

这样当tmp1组件出现时才能选择子路由。
注意：
子路由的地址最好写成’login’而非’/login’,前者会在父路由后面加上’login’,后者将会替换父路由.(且访问前者的地址为/account/login，访问后者为/login)
个人测试发现：不先访问父路由直接访问子路由，那么父路由和子路由将会直接一起触发。

命名视图

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

想要三个标签显示不同的控件，路由规则这样写 （name属性）

{path:"/",components:
				{default:header,
					left:leftBox,
					main:mainBox}
	}