vue-001小米webapp路由配置过程

一、安装vue-router.js

npm install vue-router -S

二、在src中创建views文件夹,存放页面级路由组件

创建所需的页面级路由组件

Index.vue
Category.vue
Star.vue
Cart.vue
My.vue


image.png

步骤

  1. 在views中创建Index.vue

  2. 输入"vue",回车,生成基本代码结构

  3. 在template中创建div

        <template>
            <div class="index">
                首页的内容
            </div>
        </template>
    

三、在src下创建router文件夹,创建index.js文件,进行路由配置

image.png
// 实现路由配置,路由的配置是全局的,也就是对整个App都起作用
// 该路由配置控制整个App的跳转
import Vue from 'vue';
import VueRouter from 'vue-router';

// 如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
Vue.use(VueRouter)

//引入页面级路由组件
// @/ 等价于 src/
import Index from '@/views/Index.vue'
import Car from '@/views/Car.vue'
import My from '@/views/My.vue'
import Cast from '@/views/Cast.vue'
import List from '@/views/List.vue'


//路由配置
const routes = [
    {
        path: '/',
        component: Index
   },
    {
        path: '/Car',
        component: Car
    },
    {
        path: '/My',
        component: My
    },
    {
        path: '/Cast',
        component: Cast
    },
    {
        path: '/List',
        component: List
    },
]

//创建路由对象
const router = new VueRouter({
    routes
})

//导出路由对象
export default router

四、在main.js中引入路由并注册

import Vue from 'vue'
import App from './App.vue'

import router from './router/index.js'
......

new Vue({
  // h是一个渲染dom的回调,将App组件渲染到id=app的dom结构中
  render: h => h(App),
  // #app: 即为public文件夹中index.html中的<div id="app"></div>

  router: router
}).$mount('#app')

五、在根组件App.vue中使用<router-view>组件和<router-link>组件

<template>
    <div id="app">
        <router-view></router-view>
        <div class="footer">
                 <router-link to="/" tag="p">首页</router-link>
                 <router-link to="/category" tag="p">分类</router-link>
                 <router-link to="/cart" tag="p">购物车</router-link>
                 <router-link to="/my" tag="p">我的</router-link>
        </div>
    </div>
</template>

地址栏路径不同,会根据路由配置,在router-view中显示对应的路由组件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、安装vue-router.js npm install vue-router -S 二、在src中创建view...
    民谣123阅读 521评论 0 0
  • Vue2.0较Vue1.0,路由有了较大改变。看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件...
    爱吃白萝卜猫Tonya阅读 1,083评论 0 4
  • Vue 路由的配置 什么是路由 Vue 路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候...
    暖A暖阅读 2,728评论 0 1
  • 本文转载于前端工匠。如有侵权联系本人立刻删除 一、首先带着问题 要学习vue-ro...
    qiaoguoxing阅读 474评论 0 1
  • 路由介绍 Vue router是 Vue.js的官方路由管理器,用于构建单页面项目,在安装Vue-cli时,选择...
    听书先生阅读 592评论 0 1