vue 简单路由例子

2018-11-06 本文已影响32人 zhcnnet

记录一个vue路由例子，也是看过一篇文章，然后忘记原链接了，怕忘记，所以写下来。
打开nodejs，下载模板

vue init webpack-simple hello

然后就是一路回车回车回车就OK了

image.png

接下来就是安装vue-router和syntax-dynamic-import
vue-router是路由依赖的包
syntax-dynamic-import是懒加载依赖的包

cnpm install vue-router --save
cnpm install --save-dev babel-plugin-syntax-dynamic-import

image.png

然后安装项目

cnpm install

image.png

测试一下，没什么问题

cnpm run dev

image.png

模板弄好了，开始配置项目了

配置新建一个router.config.js文件，与main.js放到同一个目录

export default
{
    routes:
    [
        {
            path:"/",
            component:() => import(/* webpackChunkName: "index" */ './view/index.vue'),
        }
    ]
}

新建一个view目录，在view目录里新建一个index.vue，随便写点文字就行了

<template>
    <div id="index">
        index
    </div>
</template>

<script></script>

<style></style>

main.js引入router.config.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import App from './App.vue'
import routerConfig from './router.config.js'

var router = new VueRouter(routerConfig);
new Vue({
    el: '#app',
    render: h => h(App),
    router: router,
})

接下来是App.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

设置好了，但还用不了，如果你尝试运行就会发现出错，还要配置.babelrc文件。
往.babelrc文件里添加一行代码

"plugins": ["syntax-dynamic-import"]

.babelrc文件完整的代码是这样的

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
"plugins": ["syntax-dynamic-import"]
}

然后运行就能看到结果了

cnpm run dev

image.png

子路由

但是这例子内容好像太简单了，来加点东西吧
手机页面，底部菜单有首页、其他、个人中心

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>你好</title>
        <style>
            body
            {
                margin: 0px;
                -webkit-tap-highlight-color: transparent;
                background-color: #f5f5f5;
                
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <script src="/dist/build.js"></script>
    </body>
</html>

router.config.js

export default
{
    routes:
    [
        {
            path:"/",
            component:() => import(/* webpackChunkName: "index" */ './view/index.vue'),
            redirect:"/index/home",//默认跳转到首页
            children:
            [
                {
                    path:"/index/home",
                    component:() => import(/* webpackChunkName: "index" */ './view/index/home.vue'),
                },
                {
                    path:"/index/other",
                    component:() => import(/* webpackChunkName: "index" */ './view/index/other.vue'),
                },
                {
                    path:"/index/my",
                    component:() => import(/* webpackChunkName: "index" */ './view/index/my.vue'),
                }
            ]
        },
        {
            path: "*",
            redirect: "/"
        }
    ]
}

index.vue

<template>
    <div id="index">
        <router-view></router-view>
        <div class="nav-bottom">
            <a class="nav-bottom-item" href="#/index/home">
                <img src="../assets/logo.png"/>
                <span>首页</span>
            </a>
            <a class="nav-bottom-item" href="#/index/other">
                <img src="../assets/logo.png"/>
                <span>其他</span>
            </a>
            <a class="nav-bottom-item" href="#/index/my">
                <img src="../assets/logo.png"/>
                <span>个人中心</span>
            </a>
        </div>
    </div>
</template>

<script></script>
<style>
    body
    {
        margin-bottom: 56px;
    }
    #index .nav-bottom
    {
        display: flex;
        background-color: white;
        position: fixed;
        bottom: 0px;
        left: 0px;
        box-sizing: border-box;
        width: 100%;
        box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
    }
    #index .nav-bottom-item
    {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0px;
        padding-bottom: 10px;
        padding-top: 6px;
        position: relative;
        color: black;
        text-decoration: none;
    }
    #index .nav-bottom-item:after
    {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,0.1);
        opacity: 0;
        transition: all ease-in-out 150ms;
    }
    #index .nav-bottom-item:active:after
    {
        opacity: 1;
    }
    #index .nav-bottom-item img
    {
        height: 24px;
        width: 24px;
    }
    #index .nav-bottom-item span
    {
        height: 16px;
        font-size: 14px;
        text-align: center;
    }
</style>

home.vue

<template>
    <div id="home">
        <div class="title">首页</div>
    </div>
</template>

<script></script>

<style>
    #home .title
    {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 22px;
        font-weight: 900;
    }
</style>

my.vue

<template>
    <div id="other">
        <div class="title">昵称</div>
    </div>
</template>

<script></script>

<style>
    #other .title
    {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 22px;
        font-weight: 900;
    }
</style>

other.vue

<template>
    <div id="other">
        <div class="title">其他</div>
    </div>
</template>

<script></script>

<style>
    #other .title
    {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 22px;
        font-weight: 900;
    }
</style>