路由跳转
简单记录下:
1、src 目录下创建router 目录 下创建 index.js
index.js 如下图:
import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import Class from "./../page/class/class.vue";
// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
{
path:'/class',
name:'class',
component:Class
}
]
var router = new VueRouter({
routes
})
export default router;
2、main.js 注册实例化
main.js 如下图:
import Vue from 'vue'
import App from './App.vue'
import api from './api/index.js'// 引用API文件
import router from './router/index.js'// import router 的router 一定要小写, 不要写成Router, 否则报 can't match的报错
Vue.prototype.$api = api // 将API方法绑定到全局
Vue.config.productionTip = false
new Vue({
router, // 注入到根实例中
render: h => h(App),
}).$mount('#app')
配置 Router
用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装
嵌套路由
app.vue下插入<router-view>
<router-view></router-view>
1.使用 <router-link> 映射路由
只需要跳转页面,不需要添加验证方法的情况,可以使用 <router-link> 来实现导航的功能:
<router-link to="/class">Go to class</router-link>
2.编程式导航
实际情况下,有很多按钮在执行跳转之前,还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
详情移步官网文档:https://router.vuejs.org/zh/guide/