zoukankan      html  css  js  c++  java
  • router路由配置

    vue项目中router路由配置

     

    介绍

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

    安装

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

     *没有安装淘宝镜像的可以将 cnpm 替换成 npm

    想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索  镜像  即可跳转到对应位置)

    配置

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

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

    1. 引入:
    1
    2
    3
    import Vue from 'vue'
     
    import Router from 'vue-router'

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

      2. 使用/注册:

    1
    Vue.use(Router)

      3. 配置

    配置路由:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    export default new Router({
      routes: [
       {
            path : ‘/’,  //到时候地址栏会显示的路径
            name : ‘Home’,
            component :  Home   // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”.
        },
        {
            path : ‘/content’,
            name : ‘Content’,
            component :  Content
        }
    ],
        mode: "history"
    })

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

    1
    2
    3
    import Home from '@/components/Home'
     
    import Home from '@/components/Content’

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

    1
    import router from './router'

      6. App.vue页面使用(展示)路由:<!-- 展示router -->

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

    1
    <router-view></router-view>

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

    1
    2
    3
    <router-link  to="/">切换到Home组件</router-link>
     
    <router-link  to="/content">切换到Content组件</router-link>
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    html5——文件断点续传
    前端自制Jquery插件————轮播
    js的订阅发布者模式
    写在前面
    Jmeter用于接口测试中,关联如何实现
    转: centos7 jdk(java) 安装以及安装命令相关知识
    ubuntu12.04上手动安装mysql
    ubuntu12.04 安装和卸载mysql
    Ubuntu 12.04 安装MySQL
    Ubuntu 12.04下安装MySQL图解
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13092721.html
Copyright © 2011-2022 走看看