vue-router 路由（不完整）

1. 前端路由的概念与原理

1.1 什么是路由

路由（英文：router）就是对应关系。

1.2 SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。
此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

1.3 什么是前端路由

通俗易懂的概念：Hash 地址与组件之间的对应关系。

1.4 前端路由的工作方式

① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

1.5 实现简易的前端路由

步骤一： 通过 标签，结合 comName 动态渲染组件。

<template>
  <div id="app">
    <component :is="comName"></component>
  </div>
</template>

步骤二： 在 App.vue 组件中，为<a>链接添加对应的 hash 值。
步骤三： 在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化window.onhashchange，动态切换要展示的组件的名称。

2. vue-route的基本使用

2.1 什么是vue-route

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目
中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

2.2 vue-route安装和配置的步骤

1. 在项目中安装 vue-router
npm install vue-router
2. 创建路由模块
在 src 源代码目录下，新建 router/index.js 路由模块，并初始化

//1. 导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//2. 调用Vue.use()函数，把VueRouter安装位Vue的插件
Vue.use(VueRouter)
//3.创建路由的实例对象
const router = new VueRouter()
//4.向外共享路由的实例对象
export default router

3. 导入并挂载路由模块
在 src/main.js 入口文件中，导入并挂载路由模块。

import Vue from 'vue'
import App from './App.vue'
//导入路由模块，拿到路由的实例对象
import router from '@/router/index.js'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    //router:router
    router
}).$mount('#app')

4. 声明路由链接和占位符

3. vue-route的常见用法

重定向

多个路径指向同一个组件

const routes = [
    {
        path:"/home",
        component: home
    },
    // 重定向
    {
        path: '/', 
        redirect: '/home' 
    }
]

动态路由

有时候path属性是不能写死的，就需要给路径一个动态部分来匹配不同的id。在vue-router中，动态部分 以:开头

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
      <router-link to="/home">Home</router-link>
     <!--  增加两个到user组件的导航，可以看到这里使用了不同的to属性 -->
      <router-link to="/user/123">User123</router-link>
      <router-link to="/user/456">User456</router-link>
    </header>
    <router-view></router-view>   
  </div>
</template>

const routes = [
    {
        path:"/home",
        component: home
    },
    /*新增user路径，配置了动态的id*/
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

动态路由中，组件获取动态部分

可以通过this.$route来获取到 router 实例。它有一个params 属性，就是来获得这个动态部分的。

<template>
    <div>
        <h1>User</h1>
        <div>我是user组件, 动态部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
            dynamicSegment () {
                return this.$route.params.id
            }
        }
    }
</script>

<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to表示的是你要去的那个组件，from 表示的是你从哪个组件过来的，它们是两个对象，你可以把它打印出来，它们也有一个param 属性
                console.log(to);
                console.log(from);
                this.dynamicSegment = to.params.id
            }
        }
    }
</script>

嵌套路由

<template>
    <div>
        <h1>home</h1>
<!-- router-link 的to属性要注意，路由是先进入到home,然后才进入相应的子路由如 phone,所以书写时要把 home 带上 -->
        <p>
            <router-link to="/home/phone">手机</router-link>
            <router-link to="/home/tablet">平板</router-link>
            <router-link to="/home/computer">电脑</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

const routes = [
    {
        path:"/home",
　　　　　// 下面这个属性也不少，因为，我们是先进入home页面，才能进入子路由
        component: home,
　　　　 // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            },
            // 当进入到home时，下面的组件显示
    		{
        		path: "",
        		component: phone
    		}
        ]
    }
]

命名路由

{
        path: "/user/:id",
        name: "user",
        component: user
}

 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 当使用对象作为路由的时候，to前面要加一个冒号,表示绑定

编程式导航

点击按钮的时候，跳转另一个组件

this.$router.push("home")

vue-router的push和replace的区别

• this.$router.push():会向history栈添加一个记录，点击后退会返回到上一个页面。

• this.$router.replace():不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

• this.$router.go(n):相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面