vue Router

Vue项目各文件含义

1.src文件夹 是我们真正敲代码的文件夹，

2.assets放静态资源

3.components放组件

4.App.vue主组件

5.main.js项目的入口文件

 

Vue Router 

 在router/index.js路由文件中配置路由，设置路由跳转规则

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

进行路由规则的配置

路由数组ruter表示路由表

routes数组中每个对象都对应一条路由规则。

每个对象里都有两个必填属性path和component

path表示路由地址，component表示路由地址对应的页面视图文件

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')
  },

]

<router-link>

路由跳转：

原来在html中用<a>标签来进行跳转，herf属性来设置跳转地址<a herf = "www.baidu.com"><a>

是现在用<router-link>组件 ，to属性用于设置目标地址内容

在app.vue里用to属性设置的是 我点击<router-link>中间的文字 会进入那个网址 比如点击about 就会进入"localhost:8080/about"这个网址

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

 <router-view/>

 路由页面渲染  

       <router-view/>标签处理组件的渲染，

    把路由对应的视图文件渲染到页面的这个位置

在VueRouter里 有两种文件引入的方式

第一种：（导入时）import 自定义页面名 from ‘页面路径’ （使用时）直接写这个自定义页面名

 第二种：直接在使用这个页面时导入