vue3-VueRouter使用

  1. 首页
  2. 新闻资讯
  3. 正文

一、新建项目Demo2

二、安装 参考文献：Installation | Vue Router

npm install vue-router@4

三、新建目录及页面

/products/index.vue

<template> 	<h1>产品管理</h1> </template> <script setup> </script> <style> </style>

/merchands/index.vue

<template> 	<h1>商品管理</h1> </template>  <script> </script>  <style> </style>

四、修改

index.html

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <link  href="/favicon.ico" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Vite App</title> 	<script type="module" src="/src/main.js"></script>   </head>   <body>     <div id="app"> 	</div>   </body> </html>

App.vue

<script setup> </script>  <template>   <img alt="Vue logo" src="./assets/logo.png" alt="vue3-VueRouter使用" />   <p>      <router-link to="/">P</router-link>      <router-link to="/m" style="margin-left: 20px;">M</router-link>    </p>    <router-view></router-view> </template>  <style> #app {   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

main.js

import { createApp } from 'vue' import * as VueRouter from 'vue-router';  import App from './App.vue' import Product from './products/index.vue' import Merchands from './merchands/index.vue'  const routes = [   { path: '/', component: Product },    { path: '/m', component: Merchands }, ] const router = VueRouter.createRouter({   // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。   history: VueRouter.createWebHashHistory(),   routes, // `routes: routes` 的缩写 }) createApp(App).use(router).mount('#app')

五、效果

上一个：猫咪的三针疫苗间隔多久打（猫咪的三针疫苗间隔多久打第二针）

下一个：猫咪三联和狂犬疫苗价格（猫咪三联和狂犬疫苗价格一样吗）

热门文章

归纳