vue 路由

简介

　　创建单页面应用，官方路由组件，实现前端路由功能

 

安装

　　npm install vue-router

 

简单路由

　　创建路由规则文件

　　将router 挂载到 vue 实例中

　　路由参数类型

　　　　路径参数

　　　　查询字符串参数

　　路由跳转

　　　　使用 router-link

　　　　to 属性 可以为path 路径，命名路由以及路径参数和查询字符串参数

 

创建一个router / index.js 文件，使用步骤：

　　1、导入 Vue 和 VueRouter

　　　　import  Vue  from 'vue'

　　　　import  VueRouter  from ' vue-router '

 

　　2、调用插件：Vue.use( VueRouter)

　　　　

　　3、定义 route components 

　　　　import  greeting  from  ''../components/greeting '

　　4、create the cocmponents

　　　　const router = new VueRouter ({

　　　　　　mode: 'history',

　　　　　　base: __dirname,

　　　　　　routes: [

　　　　　　　　{ path: ' / ', component: greeting },

　　　　　　]

　　　　})

　　5、导出路由

　　　　export default router

 

在App.vue 中加载路由

　　<router-view></router-view>

在 main.js 中，导入vue router 对象，并挂载到Vue 实例中

　　import router from ‘../router/index’

　　new Vue ({

　　　　router,

　　　　render: h => h(App),         // 渲染App 根组件

　　}). $mount(' #app ');