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 2.0 常用基础知识点之router-link
Vue六六路由的基本概念: hash模式(锚链接) history模式路由 Vue-router介绍 vue-router路由模式 404和重定位——嵌套路由 动态路由匹配 网路请求