一、基础知识

1.后端路由和前端路由

「后端路由」：根据不同 URL 请求，返回不同内容。

本质：URL 请求地址——服务器资源的对应关系

「前端路由」：根据不同用户事件，显示不同内容

本质：用户事件——事件处理函数的对应关系

2.hash 模式简单实现路由

window 下的 onhashchange 方法

window.onhashchange = function(){

    console.log(location.hash);  //获取到最新的hash值
}

单单改变#后的部分，不会重新向请求服务器，不触发网页重载。

只会滚动到相应位置，不会重新加载网页。
改变#会改变浏览器的访问历史。

每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，用"后退"按钮，就可以回到上一个位置。对 IE6、7 不成立
window.location.hash 这个属性可读可写。

读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。
onhashchange 事件 HTML 5 新增，当#值发生变化时，会触发这个事件

二、Vue-Router

支持 history 模式和 hash 模式

支持嵌套路由、路由参数、编程式路由、命名路由等，进阶功能查看官网

1. 步骤：

「导包」
配置**「路由规则」**

var myRouter = new VueRouter({ //routes：路由规则数组 routes:[ //每一个路由规则都是一个对象，至少包含path和component两个属性 //path —— 路由匹配的hash地址，和上面的to保持一致 //component —— 路由规则对应要展示的组件对象 {path:"/user",component:User}, {path:"/login",component:Login} ] })
路由要**「挂载到 Vue 根实例」**中

new Vue({ el:"#app", //通过router属性挂载路由对象 router:myRouter })
路由**「链接」** + 路由填充位（**「占位符」**）

// 默认渲染： // to属性 —— a标签 // to属性的值 —— #开头的hash地址

// 根据路由规则匹配到的组件，会被渲染到占位符的位置
要展示的**「组件」**

2. 路由重定向

用户在访问地址 A 时，强制用户跳转到地址 C，展示特定组件页面

「方法：」 通过

路由规则里

面的

redirect 属性

，指定新路由地址

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

3. 嵌套路由

单击父路由链接——显示模板内容——模板里还有子路由链接——单击显示子级模板

「子路由创建：」

在父级组件的路由链接里，添加子级连接，并添加
占位符
在路由规则里，添加子数组，是个子路由规则

//父级组件template里 //在路由链接router-link的to属性，添加子级路径/account

// 两层路径账号密码登录扫码登录

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ { path: "/login", component: Login, //通过children属性为/login添加子路由规则 children:[ //两层路径 { path: "/login/account", component: account }, { path: "/login/phone", component: phone }, ] } ] })

4. 动态路由匹配

比如 user/1 显示 User1，user/2 显示 User2，user/3 显示 User3,user/4 显示 User4

通过动态路由参数，进行路由匹配

/和:id

—— 「/」 表示下一级，**「冒号」表示要动态匹配参数，「id」**是参数名，任意起名
如果想在组件中访问动态参数，用$router.params.id

var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名的形式传递参数 { path: "/user/:myId", component: User },
```
]
```
})

显示user1 ...

{{$router.params.myId}}

5. 路由组建传参

上面说的

$router.params.myId

↓ 解耦
路由规则中，添加 props 属性 ——

props:true

组件中，props 接收

props 的值可以为**「true/false」** 或 「对象形式」 或 「函数形式」

1.prop 值为 true

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:myId", component: User, props:true },

    ]
})

var User = {
    // props接收参数
    props:["myId"],
    // 然后就可以在模板里用它了，不需要 $router.params.了
    template:"<div>用户：{{myId}}</div>"
    }

2.props 值为对象：

这样传，这个时候**「id 已经访问不到了」**，传的是 username 和 pwd

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //如果props设置为对象，则传递对象中的数据，给组件
        {
          path: "/user/:id",
          component: User,
          props:{
            username:"jack",
            pwd:123456
          }
        }
    ]
})

var User = {
    props:["username","pwd"],
    template:"<div>用户：{{username}}---{{pwd}}</div>"
}

3.props 值为函数：这样就可以既有**「静态参数」username 和 pwd，又有「动态参数」**id 了

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //props值为函数，通过函数的第一个参数获取路由对象。
        //路由对象通过形参传进，通过它的params属性 得到 传递的参数
        {
          path: "/user/:id",
          component: User,
          // 这里形参route为动态参数对象，上面path里冒号几个动态参数，route里就有几个对象
          props:(route)=>{
            return {
              username: "jack",
              pwd: 123,
              // 路由对象.params.id
              id: route.params.id
            }
            //这里
          }
        },
   ]
})

var User = {
    props:["username","pwd","id"],
    template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>"
}

6.命名路由

就是为了区分不同路径，给路由规则起个名，多加了 name 属性

var myRouter = new VueRouter({
    routes: [
        { //增加name属性，为路由设别名
          path: "/user/:id",
          component: User,
          name:"user"
        }
    ]
})

//可以用别名进行跳转
<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>

//还可以编程式导航
myRouter.push( { name:'user' , params: {id:123} } )

7. 编程式导航

「声明式导航」：通过单击链接，比如 a 标签或 router-link

「编程式导航」：利用 js 形式的 API 实现导航。比如 location.href

常用编程式导航 API：

this.$router.push('hash 地址')

this.$router.go(n)，正数前进、复数回退

// 直接放hash地址
this.$router.push("/login");

// push()参数为对象，用path属性指定
this.$router.push({ path:"/login" });

// push()参数为对象，用name属性命名路由指定，用params属性传参
this.$router.push({ name:'user' , params: {id:123} });

// 用query带查询参数，变成/login?username=jack
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );