<vue 路由 1、路由的基本使用>

一、     项目创建

参考如下博客地址创建一个vue的项目

https://www.cnblogs.com/yclh/p/15356171.html   vue学习笔记 二、环境搭建+项目创建

 

二、代码结构

 

 

 

注：主要是标红的几个文件

三、代码

重新编写这几个文件中的代码

index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//引入路由 import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue'   //定义路由 const routes = [   {     path: '/',     name: 'Home',     component: Home   },   {     path: '/about',     name: 'About',     component: () => import('../views/About.vue')   } ]   //创建路由 const router = createRouter({      //createWebHashHistory hash模式路径前面会多一个#号   history: createWebHistory(process.env.BASE_URL),   routes })   //返回了路由 export default router

 

App.vue

?

1 2 3 4 5 6 7 8 9 10 11

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

 

Home.vue

?

1 2 3 4 5 6 7 8 9

<template>   <div class="home">       <p>Home Page</p>     <img alt="Vue logo" src="../assets/logo.png">   </div> </template>   <script> </script>

 

About.vue

 

?

1 2 3 4 5

<template>   <div class="about">     <h1>This is an about page</h1>   </div> </template>

 

四、效果

1、运行程序

注:要进入到相应的路劲下

 

 

 

启动成功后：

 

 

 

2、浏览器打开http://localhost:8080/

 

 

 

点击About后

 

 

 

五、代码解释

index.js:引入、定义、创建并返回了路由  

其中：

import Home from '../views/Home.vue'

{

    path: '/',

    name: 'Home',

    component: Home

 } 这是一个默认路径

 

App.vue:使用了<router-link> 和<router-view>标签

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

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

Home.vue和About.vue是两个普通的组件