Vue--------vue-router

app.vue

<template>
    <div>
        <p>
            <router-link to="/">首页</router-link>
            <router-link to="/product">商品</router-link>
            <router-link to="/product2">商品2</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import product from '@/components/product'
import product1 from '@/components/product1'

Vue.use(Router)

export default new Router({
  routes: [
    {
        path: '/',
        name: 'home',
        component: home
    },
    {
        path: '/product',
        name: 'product',
        component: product
    },
    {
        path: '/product1',
        name: 'product1',
        component: product1
    }
  ]
})

参数传递

方法一（name传递参数）

在index.js里设置name属性
在模板中用$route.name接收

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

方法二（通过<router-link> 标签中的to传参）

<router-link :to="{name:'product',params:{username:'aaa',id:178}}">product页面</router-link>

在模板中用$route接收

{{$route.params.username}}----{{$route.params.id}}

方法三（通过url传递参数）

<router-link to="/product1/55/sunny">product1页面</router-link> 

router/index.js

{
    path:'/product1/:Id/:username', <!--//正则  path:'/product1/:Id(\\d+)/:username'-->
    component:product1
}

模板中输入

<p>{{ $route.product1.Id}}----{{ $route.product1.username}}</p>
<!--<p>{{ $route.params.Id}}----{{ $route.params.username}}</p>-->

路由的过渡动画

<transition name="fade" mode="out-in">
    <router-view ></router-view>
</transition>
<style type="text/css">
    .fade-enter {
      opacity:0;
    }
    .fade-leave{
      opacity:1;
    }
    .fade-enter-active{
      transition:opacity .5s;
    }
    .fade-leave-active{
      opacity:0;
      transition:opacity .5s;
    }
</style>

mode的设置和404页面的处理

mode的两个值
histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://aaa/bbb/，也好看！
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

当前模板

mode:'history'
export default({
    name:'pos',
})

404页面的处理（编写error.vue）
router/index.js

{
   path:'*',
   component:error
}

redirect重定向(路径不同，但可以跳转到同一个页面)

{
        path: '/product',
        component: product
 }, 
{
        path: '/product2',
         redirect:'/product' 
 }

//重定向时传递参数
{
    path:'/product1/:Id/:username', <!--//正则  path:'/product1/:Id(\\d+)/:username'-->
    component:product1
},
{
    path:'/product3/:Id/:username',
    redirect:'/product1/:Id/:username'
}

alias别名的使用

<router-link to="/product4">product4</router-link>
{
  path: '/product5',
  component: product5,
  alias:'/product4'
}

redirect和alias的区别

redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。
注意：别名请不要用在path为’/’中，如下代码的别名是不起作用的。

{
  path: '/',
  component: hello,
  alias:'/home'
}

路由中的钩子

在路由配置文件（/src/router/index.js)只能写beforeEnter这个钩子函数

{
  path:'/product3/:Id/:username',
  component:product3,
  beforeEnter:(to,from,next)=>{
    console.log('我进入了product3模板');
    console.log(to);
    console.log(from);
    next();//可以写成next(true)  不写的话不执行
},

三个参数：

to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，常用的有next(true)和next(false)。

写在模板中的钩子函数

beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。

export default {
  name: 'product1',
  data () {
    return {
      msg: 'product1 hello!'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}

编程式导航

this.$router.push(‘/xxx ‘)

编程式导航都作用就是跳转，比如我们判断用户名和密码正确时，需要跳转到用户中心页面或者首页，都用到这个编程的方法来操作路由。

<button @click="goHome">回到首页</button>

export default {
  name: 'app',
  methods:{
    goHome(){
      this.$router.push('/');
    }，
    goback(){
      this.$router.go(-1);//返回上一步
    },
    goback(){
      this.$router.go(1);//前进一步
    },
  }
}