从零搭建一个django项目-4.2-vue项目学习

怪盗LYL

发布于 2022-06-13 13:18:24

7170

文章被收录于专栏：测试开发真货测试开发真货

今天找vue的注册和登录项目时候发现大部分都是用的route插件，而我们昨天创建项目时候是选择的默认没有route插件。水一下。

—

增加route插件

可以使用命令行npm install vue-router --save（默认是安装3版本），也可以使用vue ui的方式安装。

命令行运行vue ui 打开vue页面，在插件菜单右上角点击安装route。

再查看vue项目结构，多了一个route文件夹和views文件夹。

route夹子里有两个vue模板分别叫AboutView.vue和HomeView.vue，我们再来看看App.vue，其中router-link有点类似于a标签，可以跳转路由这里分别是"/"和"/about"，路由值跳转的页面在route/index.js里看。可以看到分别返回HomeView.vue和AboutView.vue模板页面。

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router