Vue-router学习- 路由匹配

Posted walker-lyl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-router学习- 路由匹配相关的知识,希望对你有一定的参考价值。

一、Vue-router引入使用

 Vue-router就是一个vue路由类,通过new一个Vue路由实例,然后Vue.use()嵌入即可。

一般分为以下步骤:

1.引入

(1)、方法一:npm包嵌入,然后引入

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

 

(2)、CDN直接引入(练习使用)

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

 

2.配置路由对象+创建VueRouter实例

(1)、配置路由对象

// 路由配置对象
        const routes = [
            {
                path: ‘/‘,
                component: A
            },
            {
                path: ‘/A/:id‘,
                component: A
            },
            {
                path: ‘/B/:id‘,
                component: B
            }
        ];

 

(2)、创建VueRouter实例

// 将路由配置对象作为参数
        const router = new VueRouter({
            routes
        });

 

3.将创建的VueRouter实例传入创建的Vue实例中

const app = new Vue({
            router
        }).$mount(‘#app‘);

 

二、Vue-router路由配置

 

 

 

 

 

 

 

 

 

 

 

---------------

 

以上是关于Vue-router学习- 路由匹配的主要内容,如果未能解决你的问题,请参考以下文章

Vue-router 动态路由匹配

vue路由对象($route)参数简介

深入Vue3学习vue-router vuex

08.vue-router动态路由匹配

vue-router 2.0 常用基础知识点之router-link

Vue六六路由的基本概念: hash模式(锚链接) history模式路由 Vue-router介绍 vue-router路由模式 404和重定位——嵌套路由 动态路由匹配 网路请求