vue-router 初体验

路由跳转

简单记录下：

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/