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的路径一样即可

  • 相关阅读:
    Mandriva Flash: 到处可用的口袋 Linux
    Pidgin 衔接 Google Talk 的设置配备铺排
    5 个使 Vim 更易用的脚本
    Bash 运用才干大补贴
    915Resolution打点宽屏表现标题问题
    Linux下误删root目次
    惠普推出 Linux 迷你条记本
    weblogic8.1for linux ES3.0拆卸与设置
    英俊的 Linux Mini PC
    Zonbu-售价 99 美元的袖珍电脑
  • 原文地址:https://www.cnblogs.com/dekevin/p/12347730.html
Copyright © 2011-2022 走看看