发表于： 2021-05-11 19:34:14
1 1867
今天完成的事情：学习了VUE的路由和组件
明天计划的事情：继续看VUE
收获：
如何使用vue路由
在创建完vue项目后，添加vue路由vue-router依赖包，可以使用
npm install vue-router
或者
vue add router
在出现的index.js文件里引入组件
import { createRouter, createWebHistory } from 'vue-router'
import Pagea from '../components/pagea.vue'
import Login from '../views/login.vue'
import Dashboard from '../views/dashboard.vue'
const routes = [
{ path: '/', name: 'login', component: Login },
{ path: '/pagea', name: 'pagea', component: Pagea },
{ path: '/dashboard', name: 'dashboard', component: Dashboard },
{ path: '/about', name: 'About', component: () => import('../views/About.vue') }
]
然后在组件内
<template>
<button @click="login()">登陆</button>
</template>
<script>
export default {
methods: {
login() {
this.$router.push({
name: "pagea",
});
},
},
};
</script>
this.$router.push就是路由跳转
返回列表
评论