Vue全家桶之前端路由

一、vue-router的基本使用

1. Vue Router 介绍

Vue Router是Vue.js官方的路由管理器。
它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。

Vue Router 包含的功能有:

• 支持HTML5历史模式或hash模式
• 支持嵌套路由
• 支持路由参数
• 支持编程式路由
• 支持命名路由

2. 基本使用步骤

① 引入相关的库文件
有顺序要求：先引入vue.js，再引入vue-router.js。

<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

② 添加路由链接

<!--  router-link 是 vue 中提供的标签，默认会被渲染为a标签 -->
<!-- to 属性默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 #开头的hash地址  -->
<router-link to="/zhuye">主页</router-link>
<router-link to="/keji">科技</router-link>

③ 添加路由填充位

<!-- 路由填充位：也叫路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在位置 -->
<router-view></router-view>

④ 定义路由组件

// 定义路由组件
const zhuye = {
    template: '<h1>主页信息 组件</h1>'
}
const keji = {
    template: '<h1>科技信息 组件</h1>'
}

⑤ 配置路由规则并创建路由实例

// 创建路由实例对象
const router = new VueRouter({
    // routes 是路由规则数组
    routes: [
        // 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性
        // path 表示当前路由规则匹配的 hash 地址
        // component 表示当前路由规则对应要展示的组件
       {
        path: '/zhuye',
        component: zhuye
    }, {
        path: '/keji',
        component: keji
    }]
})

⑥ 把路由挂载到Vue根实例中

var app = new Vue({
    el: "#app ",
    data: {

    },
    //为了能够让路由规则生效，必须把路由对象挂载到Vue实例对象上
    //router: router
    //简写
    router
});

3. 路由重定向

路由重定向指的是: 用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
path 表示需要被重定向的原地址，redirect 表示将要被重定向的新地址。

const router = new VueRouter({
    routes: [{
        path: '/',
        redirect: '/zhuye'
    }, {
        path: '/zhuye',
        component: zhuye
    }, {
        path: '/keji',
        component: keji
    }]
})

二、vue-router嵌套路由

1. 嵌套路由用法

① 嵌套路由功能分析

• 点击父级路由链接显示模板内容
• 模板内容又有子级路由链接
• 点击子级路由链接显示子级模板内容

② 父路由组件模板

• 父路由链接
• 父组件路由填充位

<div id="app">
    <router-link to="/zhuye">主页</router-link>
    <router-link to="/keji">科技</router-link>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>

③ 子路由组件模板

• 子路由链接
• 子组件路由填充位
• 子路由组件

const keji = {
    template: `
      <div>
           <h1>科技信息 组件</h1>
           <hr/>
           <!-- 子路由连接 -->
           <router-link to="/keji/tab1">tabl</router-link>
           <router-link to="/keji/tab2">tab2</router-link>
           <!-- 子路由占位符 -->
           <router-view></router-view>
      </div>
   `
   }
 //子路由组件
 const tab1 = {
     template: '<h3>tab1 子组件</h3>'
 }
 const tab2 = {
     template: '<h3>tab2 子组件</h3>'
 }

④ 嵌套路由配置

// 创建路由实例对象
const router = new VueRouter({
     //所有的路由规则
     routes: [{
         path: '/',
         redirect: '/zhuye'
     }, {
         path: '/zhuye',
         component: zhuye
     }, {
         path: '/keji',
         component: keji,
         //通过 children 属性，为 /keji 添加子路由规则
         children: [{
             path: '/keji/tab1',
             component: tab1
         }, {
             path: '/keji/tab2',
             component: tab2
         }, ]
     }]
 })

三、vue-router动态路由匹配

1. 动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

<div id="app">
    <router-link to="/user/1">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <!-- 路由占位符 -->
    <router-view></router-view>
</div>
    
const router = new VueRouter({
    routes: [{
        // 动态路由参数
        //动态路径参数，以冒号开头
        path: '/user/:id',
        component: user
    }]
})
// 定义路由组件
const user = {
    template: '<h1>user 组件---用户id为：{{$route.params.id}}</h1>'
}

结果演示：

2. 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。

① props的值为布尔类型

const router = new VueRouter({
   routes: [{
        // 如果 props 被设置为 true,route.params 将会被设置为组件属性
        path: '/user/:id',
        component: user,
        props: true
    }]
})

// 定义路由组件
     const user = {
     props: ['id'],
     template: '<h1>user 组件---用户id为：{{id}}</h1>'
 }

② props的值为对象类型

const router = new VueRouter({
    routes: [{
        // 动态路由参数
        path: '/user/:id',
        component: user,
        // 如果 props 是一个对象，它会被按原样设置为组件属性
        props: {
            uname: 'lisi',
            age: 12
        }
    }]
})

// 定义路由组件
const user = {
    props: [ 'uname', 'age'],
    template: '<h1>user 组件---用户姓名为：{{uname}},用户年龄为：{{age}}</h1>'
}

③ props的值为函数类型

const router = new VueRouter({
            routes: [{
                // 动态路由参数
                path: '/user/:id',
                component: user,
                // 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参
                props: route => ({
                    uname: 'wxy',
                    age: 20,
                    id: route.params.id
                })
            }]
        })
// 定义路由组件
const user = {
     props: ['id', 'uname', 'age'],
     template: '<h1>user 组件---用户id为：{{id}},用户姓名为：{{uname}},用户年龄为：{{age}}</h1>'
 }

四、vue-router命名路由

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为：“命名路由”。

const router = new VueRouter({
     routes: [{
         //命名规则
         name: 'user',
         path: '/user/:id',
         component: user,
         props: route => ({
             uname: 'wxy',
             age: 20,
             id: route.params.id
         })
     }]
 })
//原本用法
<router-link to="/user/2">user2</router-link>
//加了命名规则后用法
<router-link :to="{name:'user',params:{id:3}}">user3</router-link>

五、vue-router编程式导航

1. 页面导航的两种方式

• 声明式导航：通过点击链接实现导航的方式，叫做声明式导航。
  例如：普通网页中的链接 或 vue中的 < router-link></ router-link>

• 编程式导航：通过JavaScript形式的API实现导航的方式，叫做编程式导航。
  例如：普通网页中的location.href

2. 常用的编程式导航API

• this.$router.push(‘hash地址’) ：跳转
• this.$router.go(n) ：前进与后退

const user = {
    props: ['id', 'uname', 'age'],
    template: `
         <div>
            <h1>user 组件---用户id为：{{id}},用户姓名为：{{uname}},用户年龄为：{{age}}</h1>
            <button @click="gokeji">跳转到科技页面</button>
         </div>
        `,
    methods: {
        gokeji: function() {
            this.$router.push('/keji');
        }
    }
}

结果演示:

const keji = {
    template: `
        <div>
            <h1>科技信息 组件</h1>
            <button @click="goback">后退</button>
        </div>
        `,
    methods: {
        goback: function() {
            this.$router.go(-1);
        }
    }
}

结果演示: