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

  • 相关阅读:
    void用法
    使用taskkill 命令强制结束进程-附C++例子
    绝对路径和相对路径
    基于session的简单登录逻辑
    基于Cookie的简单登录流程
    网页跳转的几种方式
    header()函数
    图像处理_03_裁切与缩放
    图像处理_02_水印
    图像处理_01_验证码
  • 原文地址:https://www.cnblogs.com/dekevin/p/12347730.html
Copyright © 2011-2022 走看看