2020-2021暑期项目实训第一周——vue路由和ant design of vue学习

一．安装 router

1. Vue router 是 Vue.js 的官方路由管理器，用于构建单页面项目；
2. 在安装 Vue-cli 时，选择 router 即可安装
3. 可以先选择 no，也就是 hash 模式，可以在配置中更改成 history 模式
4. 安装好后，npm run serve 启动项目（也有可能是npm run start），会发现多了两个 link，单页链接；
5. 只不过在 hash 模式下，链接地址前会有#号，改成 history 模式则没有这个#号
6. 具体更改模式在：src/router/index.js 里，设置

const router = new VueRouter({ mode: 'history', //默认 mode : 'hash' routes })

PS：设置 history 模式，需要服务器环境配置的支持

二．路由详解

1. 安装了 router 路由的脚手架，多了两个目录，且配置和入口文件也改变了；
2. 先来分析下入口文件 main.js，比之前多了引入和注册路由的内容；

//引入路由
import router from './router' 
new Vue({ 
//注册路由
router, ... 

3. 我们来分析一下 App.vue 中路由的各种元素，搭配 router/index.js 对照看；

<!--<router-link>标签--> 
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link> 

PS：分别说明含义：
(1) .是组件导航，会被渲染成超链接标签；
(2) .to 属性是链接地址，会被渲染成 href 属性；

4. 对于的 index.js 部分

//引入 Vue.js 
import Vue from 'vue'
//引入 vue-router.js 
import VueRouter from 'vue-router' 
//引入 Home 组件 
import Home from '../views/Home.vue' 
//可以参考 API 的解释，参数是一个插件，路由就是一个插件 
//这句话的意思是：初始化这个插件以便使用 
Vue.use(VueRouter) 

//这个常量用于设置每个组件的信息，然后交给路由插件注册 
const routes = [ 
  { 
  path: '/',   //链接地址， 
  name: 'Home', //别名 
  component: Home //加载的组件 
  },
  { path: '/about', 
  name: 'about', 
  } 
]
//实例化路由组件 
const router = new VueRouter({
  mode: 'hash', //默认 mode : 'hash' 
  routes 
  })

//导出路由 
export default router 

5. 再回到 App.vue，导航链接下方有一个空标签，用于渲染页面；
6. 渲染views目录下的页面组件，而components是功能性小组件；

三、Ant Design Vue

• 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。

• 特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Vue 组件。
  • 共享Ant Design of React设计工具体系。

• 支持环境

  • 现代浏览器和 IE9 及以上（需要 polyfills）。
  • 支持服务端渲染。
  • Electron
    更具体的使用方法和组件库可以参照官方文档https://www.antdv.com/docs/vue/introduce-cn/

使用Layout布局

采用顶部-侧边布局-通栏

利用vue路由实现切换菜单后右侧内容改变

1. 新建两个新页面option_1.vue和option_2.vue
2. 在router/index.js中引入两个新页面并设置路由

import option_1 from '../view/option_1'
import option_2 from '../view/option_2'

...
routes: [
    {
      path: '/option_1',
      component: option_1,
    },
    {
      path: 'option_2',
      component: option_2
    },
  ]

3. 在App.vue中找到要切换内容的标签，在标签中添加进行渲染
4. 在需要点击的菜单栏标签上绑定点击事件
5. 在methods中写方法

methods: {
    opinion1: function () {
      this.$router.push({
        path: "/option_1",
      });
    },
    opinion2: function () {
      this.$router.push({
        path: "/option_2",
      });
    },
  },

这样就可以实现点击菜单栏切换右侧内容的功能。