SPA项目目录介绍

SPA项目目录介绍

我们写的代码都在 src 目录中

入口文件main.js介绍

入口文件，项目启动之后会最先运行 main.js 文件
main.js代码详解

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,   			 	// 装载 vue-router
  store,     				// 装载 vuex
  render: h => h(App)      // 渲染 App 组件
}).$mount('#app')

在 main.js 文件中会

1、引入 vue 、vue-router、vuex 框架包

2、引入 App 组件

3、创建 Vue 对象并且装载 vue-router , vuex

4、渲染第一个组件：App.vue

所以我们运行之后看到的页面就是 App.vue 组件的内容。

Vue-Router介绍

在 SPA 中，网站内容的变换实际上的组件的切换，为了方便的实现组件间的切换，Vue 框架引入了 vue-router 工具来实现多个组件之间的切换。

Vue-Router路由配置

router/index.js

1、当访问 / 时，显示 Home 组件

2、当访问 /about 时，显示 about 组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// Vue对象的静态方法
Vue.use(VueRouter)
// 有一个页面，在此处就需要配置一个路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',// 就是url，就是未来访问的路径
    name: 'about',// 随意
    component: () => import( '../views/About.vue')
  },
  {
    path: '/list',// 就是url，就是未来访问的路径
    name: 'list',// 随意
    component: () => import( '../views/List.vue')
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

说明：

1、about 组件的写法是延迟加载：在访问 /about 路径时才会加载该组件，这样可以提高首屏显示速度

2、/* webpackChunkName: “about” */ 的意思是将这个组件添加到 about 这个组中，当访问 about 这个组件时就会添加所有 about 这个组中的组件

Vue-Router路由使用

当我们定义好路由之后，我们就可以在页面中添加按钮跳转到相应的路由，有两种跳转方法：
1、在 HTML 中使用 router-link 标签（相当于a标签）
2、在 JS 中使用 router-push 实现跳转（相当于 location.href ）

this.$router.push("切换组件的地址")

router-link标签-html代码中使用
我们可以在页面中使用 router-link 标签来制作可以跳转的按钮（相当于 a 标签）：

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
</div>

说明：to 属性用来指定点击按钮时要切换到的路由

this.$router.push-js脚本中使用

在 JS 中我们可以使用 this.$router.push 实现跳转。

login(){
  console.log( '登录成功' )
  // 跳转到 /
  this.$router.push('/主页面.vue')
}

路由切换的两种方式
router-link在HTML代码中使用
this.$router.push在js脚本中使用