git仓库：https://github.com/xiaoli0510/vue-router

vue使用vue-router步骤：

1.安装并创建实例。

npm install vue-router

2.新建router 文件夹和router.js,并进行配置router.js。

import App from '../App.vue';
import {
    createRouter,
    createWebHashHistory
} from 'vue-router'


const routes = [{
    path: '/',
    component: App, //顶层路由，对应index.html
    children: [{
            //地址为空时跳转home页面
            path: '',
            redired: '/home'
        },
        //首页城市列表页
        {
            path: '/home',
            component: () => import('../page/home/home.vue')
        }
    ]
}]

const router = createRouter({
    history: createWebHashHistory('/'),
    routes
})

export default router

3.main.js 中引入 router并使用。

文件夹目录如下：

package.json:

{
  "name": "vue-elm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=production webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.4",
    "vue-loader": "^17.0.1",
    "vue-router": "^4.1.6",
    "vue-template-compiler": "2.3.3",
    "webpack-dev-server": "^4.11.1"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack-cli": "^5.0.0"
  }
}

webpack.config.js：

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const isDev = process.env.NODE_ENV=='development'

const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            inject: 'body'
        })
        ]
}

if(isDev){
        config.devtool='cheap-module-eval-source-map'//生成map文件
        config.devServer={
            port:8081,
            host:'0.0.0.0'//使用本机ip也可以访问
        }
    }

main.js:

import {createApp } from 'vue'
import router from './router/router'

import App from './App.vue'
const dom = document.createElement('div')
document.body.append(dom)


const app = createApp(App);
app.use(router)
app.mount('#app')

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>app title</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

App.vue:

<template>
 <div>
     <router-view/>
 </div>
</template>
<script>
export default {
    name:'App',
    data(){
        return {
            txt:'这是App.vue'
        }
    }
}
</script>

router.js:

import App from '../App.vue';
import {
    createRouter,
    createWebHashHistory
} from 'vue-router'


const routes = [{
    path: '/',
    component: App, //顶层路由，对应index.html
    children: [{
            //地址为空时跳转home页面
            path: '',
            redired: '/home'
        },
        //首页城市列表页
        {
            path: '/home',
            component: () => import('../page/home/home.vue')
        }
    ]
}]

const router = createRouter({
    history: createWebHashHistory('/'),
    routes
})

export default router

home.vue:

<template>
 <div>home</div>
</template>
<script>
export default {
}
</script>

Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign