一、路由配置

• 在router文件夹下的index.js配置路由

  导入Hi.vue模板
	import Hi from '@/components/Hi'

配置路由

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/Hi',
      name:'Hi',
      component:Hi
    }
  ]
})

• 链接导航

    <div>
        <router-link to='/'>首页</router-link>
        <router-link to='/hi'>hi页面</router-link>
    </div>
或者：
    <div>
        <router-link :to="{name:'HelloWorld'}">首页</router-link>
        <router-link :to="{name:'Hi'}">hi页面</router-link>
    </div>

二、子路由配置##

• 在父页面的Hi.vue中添加 进行子页面渲染工作

<template>
  <div>
      <h2>{{msg}}</h2>
      <router-view/>
  </div>
</template>

• 在router文件夹下的index.js配置路由

	导入Hi.vue模板
	
	import Hi1 from '@/components/Hi1'
	import Hi2 from '@/components/Hi2'
	
	配置路由
	
	{
      path: '/Hi',
      name: 'Hi',
      component: Hi,
      children:[
        {
          path: 'Hi1',
          name: 'Hi1',
          component: Hi1
        },
        {
          path: 'Hi2',
          name: 'Hi2',
          component: Hi2
        }
      ]
    }
	
	
	
	

注意： 这里的path里面没有/ 否则会报错 ；如果想显示子路由配置当前的页面必须使用挂载，必不可少（这里是的是Hi页面）

• 链接导航

<router-link to='/hi/hi1'>hi页面1</router-link>|
<router-link to='/hi/hi2'>hi页面2</router-link>

三、参数传递##

• name传参方法（不常用）

在index.js路由配置时，写上name

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Hi',
      name: 'Hi',
      component: Hi,
      children:[
        {
          path: 'Hi1',
          name: 'Hi1',
          component: Hi1
        },
        {
          path: 'Hi2',
          name: 'Hi2',
          component: Hi2
        }
      ]
    }
    
    
  ]
})

获取在下个页面获取name传递的值

	<p>
      {{$route.name}}
    </p>
	

• 绑定对象传值

       <!-- 
          这里的name值要和index.js里面的值对应
		  
          对象传递String类型，int类型没有效果
         -->
        <router-link :to='{
          name:"Hi1",
          params:{
            username:"huangxiaoguo",
            id:"888"
          }
        }'>hi1页面</router-link>|

接收值：

   <div>
      <h2>{{msg}}--{{$route.params.username}}--{{$route.params.id}}</h2>
	</div>
	

注意：是$route 而不是$router

四、单页面多路由区域操作

在页面的上一级父页面添加router-view

 <router-view style="float:left;width:50%;background-color:#ccc;height:300px;" name='left'/>
 <router-view style="float:left;width:50%;background-color:#c0c;height:300px;" name='right'/>
 

配置路由

 {
      path: '/',
      name: 'HelloWorld',
      components:{
        default:HelloWorld,
        left:Hi1,
        right:Hi2
      } 
    }

注意这里的是components 而不是component

五、url传参

• 新建接收页面param.vue
• 在index.js中进行配置路由

import Params from '@/components/Param'


 {
      // url传参方法
      // path:'/Param/:newsId/:newsTitle',
      //url传参（正则匹配表示必须传递数字）
      path:'/Param/:newsId(\\d+)/:newsTitle',
      name:'Param',
      component:Params
    }
    

• url传参

	 <!-- 
          url传递参数
         -->
        <router-link to='/param/126/我是新闻标题'>param页面</router-link>
		
		

• 在param中接收数据

<p>newsId:{{$route.params.newsId}}</p>
<p>newsTitle:{{$route.params.newsTitle}}</p>

注意：在export default中的name要和index.js中要对应，即为index.js中import导入的模块名称

六、重定向

• 在index.js中进行配置

// 重定向
    {
      path:'/goHome',
      redirect:'/'
    }
    
redirect表示重新定向的路径

• 重定向传参 ，在index.js中进行配置

		// 重定向传参
		{
		  path:'/goParam/:newsId(\\d+)/:newsTitle',
		  redirect:'/Param/:newsId(\\d+)/:newsTitle'
		}
		

• 使用重定向传参

		<!-- 
          重定向传参
         -->
        <router-link to='/goParam/948/重定向传参'>goParam</router-link>|
	
	
	

七、alias别名的使用

• 在index.js中

	// alias别名的使用
    {
      path:'/hi1',
      component: Hi1,
      alias:'/xiaoguo'
    }

• 使用别名

	<!-- 
          alias别名的使用
         -->
        <!-- <router-link to='/hi1'>Hi1</router-link>| -->
        <router-link to='/xiaoguo'>Hi1</router-link>|

注意：别名的使用在首页是无效的，没有任何作用，如果跳到首页请使用重定向。

八、路由的过渡动画

• 想让路由有过渡动画，需要在标签的外部添加标签，
  标签还需要一个name属性。

	<!-- 过渡模式mode：

		in-out:新元素先进入过渡，完成之后当前元素过渡离开。
		out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
	-->
    <transition name="fade" mode="out-in">
      <router-view/>
    </transition>

	组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，
	比如name="fade",会有如下四个CSS类名：

    fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
    fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
    fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
    fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
	

• App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果

.fade-enter{
  /* 透明度 */
  opacity: 0;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave{
  opacity:1;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

九、mode的设置和404页面的处理

• mode的设置

在index.js中export default new Router下使用


export default new Router({
  /**
 * mode的两个值

    histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://localhost:8080/Huang，也好看！
    hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
   */
  mode:'history',
  // mode:'hash',
  routes: [
    ...
  ]
})

• 404页面的处理

新建Error.vue页面

在index.js引入

import Error from '@/components/Error'

配置路由

// 404页面的设置
    {
      path:'*',
      component:Error
    }

十、路由中的钩子

• 路由配置文件中配置钩子函数

在index.js中

	{
      // url传参方法
      // path:'/Param/:newsId/:newsTitle',
      //url传参（正则匹配表示必须传递数字）
      path:'/Params/:newsId(\\d+)/:newsTitle',
      name:'Params',
      component:Params,
      // 这里面可以写进入但是不能写离开，如果需要离开需要在模板里面写
      beforeEnter:(to,from,next)=>{
        console.log(to);
        console.log(from);
        // next：表示允许向下跳转，里面可以是false，next(false);
        // next();里面也可以写路径，next({path:'/'});
        next();
      }
    }

• 写在模板中的钩子函数

在对应的模板中写（params.vue）

export default {
  name: "params",
  data() {
    return {
      msg: "params pages"
    };
  },
  // 进入的
  beforeRouteEnter: (to, from, next) => {
    console.log("进入的");
    console.log(to);
    console.log(from);
    // next：表示允许向下跳转，里面可以是false，next(false);
    // next();里面也可以写路径，next({path:'/'});
    next();
  },
  //离开的
  beforeRouteLeave: (to, from, next) => {
    console.log("离开的");
    console.log(to);
    console.log(from);
    // next：表示允许向下跳转，里面可以是false，next(false);
    // next();里面也可以写路径，next({path:'/'});
    next();
  }
};

十一、编程式导航

	<div>
      <button @click="goBack">后退</button>
      <button @click="goBefore">前进</button>
      <button @click="goHome">返回首页</button>
    </div>
	
	export default {
	  name: "App",
	  methods: {
		goBack() {
		  this.$router.go(-1);
		},
		goBefore() {
		  this.$router.go(1);
		},
		goHome() {
		  this.$router.push("/");
		  /**
		    查询字符串的方式
		    this.$router.push({
			name:'music',query:{id:1,name:2}
		     })
		  **/
		}
	  }
	};