路由的基本使用

Vue中的路由可以实现不同组件间的切换。

创建一个路由对象 ,当导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter。

部分核心代码：

 <!--注意：不能够直接写/login,意思是跳转到一个真实的页面-->
 <!--<a href="/login">登录</a>-->
 
 <!--router-link默认渲染为一个a标签，可以通过tag属性来修改默认标签-->
 <router-link to="/login" tag="span">登录</router-link>
 <router-link to="/register">注册</router-link>

 <!--这是vue-router提供的元素，专门用来当做占位符的，将来路由规则匹配到的组件就会展示到这个router-view中去-->
 <transition mode="out-in">
     <router-view></router-view>    <!--视图容器-->
 </transition>


//定义路由
var routerObj = new VueRouter({
  //route  表示配置项中的路由规则
   // 每个路由规则，都是一个对象，这个规则对象身上有两个必须的属性：
   //  属性1 是 path， 表示监听 哪个路由链接地址；
   //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
   // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是组件的引用名称；
   routes:[  //路由匹配规则   可以匹配多个规则
       // {path:'/',component:login},  //有疑问
       {path:'/',redirect: '/login'},   //重定向
       {path:'/login',component:login},
       {path:'/register',component:register}
   ],
   linkActiveClass:'myactive'   //通过该属性修改默认的激活类名
});

/*****************************************/

//路由嵌套

<div id="app">
   <router-link to="/account">Account</router-link>
   <router-view></router-view>
</div>

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

//定义路由
var router = new VueRouter({
routes:[
	//实现子路由的嵌套
	 {
	     path:'/account',
	     component:account,
	     children: [
	         //注意：不能是 /login  它表示从根目录下开始
	         { path: 'login', component: login },
	         { path: 'register', component: register }
	     ]
	 },
	 // {path:'/account/login',component:login},
	 // {path:'/account/register',component:register}
	]
});

/******************************************/

//传参
<router-link to="/login?id=30&name=张利强">登录</router-link>

//注意：需要在Vue实例中的router中来注册定义好的路由
//通过打印   console.loga(this.$route.query);   来获取参数