zoukankan      html  css  js  c++  java
  • vue项目中router路由配置

    介绍

    路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》

    安装

    本地环境安装路由插件vue-router:    cnpm install vue-router --save-dev  

    配置

    两种配置方法:在main.js中 || 在src/router文件夹下的index.js中

    这里只说在src/router/index.js

    引入:

    import Vue from 'vue'
    import Router from 'vue-router'

    注意这个Router是自定义的名字,这里叫这个名字后,下边都要用到的

    使用/注册:

    Vue.use(Router)

    配置路由:

    export default new Router({
      routes: [
       {
            path : ‘/’,  //到时候地址栏会显示的路径
            name : ‘Home’,
            component :  Home   // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”.
        },
        {
            path : ‘/content’,
            name : ‘Content’,
            component :  Content
        }
    ],
        mode: "history"
    })

    引入路由对应的组件地址:

    import Home from '@/components/Home' 
    import Home from '@/components/Content’

    在main.js中调用index.js的配置: 

    import router from './router'

    App.vue页面使用(展示)路由:

    把这个标签放到对应位置:  

    <router-view></router-view>

    路由切换(原来的<a href=”XXX.html”>等地方):把切换标签和链接改成:

    <router-link  to="/">切换到Home组件</router-link>
    <router-link  to="/content">切换到Content组件</router-link>

    to里边的参数和配置时,path的路径一样即可

  • 相关阅读:
    MyEclipse修改默认的workspace路径
    对象池化技术 org.apache.commons.pool
    Java 简单工厂模式
    组装品入力
    引当日数和JAN日数的意思
    材料构成模块的做法
    在库移动和在库振替的意思
    组装品的特殊式样
    设计的尝试数据库・数据的更新
    定时器(Timer)文章收集转载(小雨论坛)
  • 原文地址:https://www.cnblogs.com/dekevin/p/12347730.html
Copyright © 2011-2022 走看看