vue 路由vue-router

来源：互联网发布：仓储淘宝王一样的小说编辑：程序博客网时间：2024/06/02 19:42

项目结构

1.下载路由 cnpn install vue-router -D

2.在app.vue中创建连接执行 tag 指定显示标签

<template>    <ul>        <router-link  tag="li" to="/home" >用户中心</router-link>        <router-link  tag="li" to="/role">权限中心</router-link>    </ul></template>

<router-view></router-view>

3.在components 中创建点击路由显示的模块

4.创建路由配置文件爱你 router.config.js 引入显示的子模块 注意:::::routes 配置路径

import Home from './components/home.vue'import Role from './components/role.vue'export default {    routes:[        {            path:'/home',component:Home        },        {            path:'/role',component:Role        },        {            path:'*',component:Home        }    ]}

5.main.js中引入路由 vue-router 和 router.config.js 引入

import VueRouter from 'vue-router'import routerConfig from './router.config.js'Vue.use(VueRouter);const router = new VueRouter(    routerConfig)new Vue({    mode:'history',    router,    el: '#app',    render: (function (h) {        return h(App);    })})

0 0