vue-router学习笔记（一）

一、了解vue-router

vue-router基于路由和组件。用vue开发时，看起来是页面的跳转，实际上是组件的切换。（因为vue中只有一个主页面index.html）。路由用于设定访问路径，将路劲和组件映射起来。

二、使用步骤

1.安装

建立脚手架3 在配置过程中选择路由即可

vue create testvuecli3
//vue create 项目名称

2.创建组件

在脚手架的components中创建.vue文件：

 

3.配置组件和路由的映射关系

router的index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../components/home'
import About from '../components/about'
Vue.use(VueRouter)

const routes = [{
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]

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

export default router

 4.使用路由

<router-link>: 该标签 是一个 vue -router 中已经内置的组件 , 会被渲染成一个 <a> 标签 .

<router-view>: 该标签会根据当前的路径 , 动态渲染出不同的组件 .

在路由切换时 , 切换的是 <router-view> 挂载的组件 , 其他内容不会发生改变 .

在App.vue文件中：

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

5.运行

在脚手架的文件中输入

npm run serve

三、结果

主要观察路径