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.引入：

import Vue from 'vue'

扫描二维码关注公众号，回复： 4929164 查看本文章

import Router from 'vue-router'

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

　　2. 使用/注册：

Vue.use(Router);

　　3. 配置

配置路由：

export default new Router({

routes: [{

path: '/',

component: Customers

{

path: '/about',

component: About

}

mode: "history"

})

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

import Home from '@/components/Home'

import Home from '@/components/Content’

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

import router from './router'

6. App.vue页面使用（展示）路由：

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

<router-view></router-view>

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

<router-link to="/" class="navbar-brand" >首页</router-link>

<router-link to="/About" class="navbar-brand">关于我们</router-link>

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

贴一个源码：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router'
import VueResource from 'vue-resource' //从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理

Vue.config.productionTip = false
    //这样以后，就可以在任何组件页面中使用http了
Vue.use(VueResource)
    /* eslint-disable no-new */
new Vue({
    el: '#app',
    router, //引用router
    template: '<App/>',
    components: { App }

})

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Customers from '@/components/Customers'
import About from '@/components/About'

//使用注册
Vue.use(Router);
export default new Router({
    routes: [{
            path: '/',
            component: Customers
        },
        {
            path: '/about',
            component: About
        }
    ],
    mode: "history"
})

App.vue 展示Vue

<template>
<div id="app">
<Nav></Nav>
<!-- 展示rooter -->
<router-view></router-view>
</div>
</template>

<script>
    import Nav from './components/Nav'
    export default {
        name: 'App',
        components: {
            Nav
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

Nav.vue,导航页面的路由链接设置，用于切换组件

<template>
  <div>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">用户管理系统</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
        aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item ">
            <router-link to="/" class="navbar-brand" >首页</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/About" class="navbar-brand">关于我们</router-link>
          </li>

        </ul>

      </div>
    </nav>
  </div>
</template>
<script>
    export default {
        name: "Nav",
        data() {
            return {

            }
        }
    }
</script>
<style>

</style>

vue配置路由（router）

猜你喜欢