vue-router设置默认路由

xiaoxiao无脸男

已于 2022-12-03 12:51:54 修改

阅读量2.8w

点赞数 3

分类专栏： vue 文章标签： vue vue-router 默认路由组件 redirect

于 2018-02-26 23:10:06 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79382859

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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>

xiaoxiao无脸男

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
vue-router设置默认路由

vue-router的使用
复制链接

扫一扫

专栏目录