0
点赞
收藏
分享

微信扫一扫

vue3脚手架配置路由

思考的鸿毛 2022-01-31 阅读 52

本文以router-link(相当于一个a标签)为例介绍路由基础环境的配置

安装路由

打开cmd输入 
npm install vue-router@4

注意,本文使用路由为vue-router: "^4.0.12"(按照上面代码安装即可),不同版本之间会出现一些不同容易发现一些无法预料的错误

教程开始

在App.vue中

<template>
<div id="app">
  <h1>Hello App!</h1>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <div class="main_nav">
      <ul>
        <li><router-link to="/about_">首页</router-link></li>
        <li><router-link to="/about_us">关于我们</router-link></li>
        <li><router-link to="/HelloWorld">产品介绍</router-link></li>
      </ul>
    </div>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
</template>

找到src目录的main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'//解构路由
import Home from './components/home.vue'   //引入一个组件,from后面接的是一个组件的路径,home.vue为我随意创建的一个文件,里面随便加点内容即可
import About_us from './components/about_us.vue'

//定义路由
const routes = [{
    path: '/about_',//组件一,path和component可以乱写,
                       只要保持path与前面to,component和import两处相同即可
    component: Home
},
{
    path: '/about_us',
    component: About_us
},
]

//配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes,//这里是routes:routes的缩写,同时此处还可以定义路由
})

//创建一个vue应用,本处写法适用于前面所说的路由版本,其他版本自测
const app = createApp(App).use(router);
app.mount('#app')

效果图,请忽略样式

 

本人vue为零基础,若有错误望多多包涵

举报

相关推荐

0 条评论