vue路由介绍及vue-router使用步骤

责编:menVScode 2017-11-30 16:18 阅读(1479)

前端路由

        在web开发中,路由是指根据 url 分配到对应的处理程序。

vue-router

        作用:通过管理 url,实现 url 和组件的对应及通过 url 进行组件之间的切换。

        官网api:https://router.vuejs.org/zh-cn/


单页应用(SPA)

        加载单个HTML页面,并在用户与应用程序交互时动态更新该页面。


vue-router使用步骤

        1. 安装vue-router模块

npm install vue-router --save

        2. 引入模块

import VueRouter from 'vue-router'

        3. 作为Vue的插件

Vue.use(VueRouter)

        4. 创建路由实例对象

new VueRouter({
  ...配置参数
})

        5. 注入Vue选项参数

new Vue({
  router
})

       6. 告诉路由渲染的位置

<router-view></router-view>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//作为Vue的插件
Vue.use(VueRouter)

import App from './App' //根组件

import Home from '@/components/Home'
var router = new VueRouter({
  routes:[
    {
      path:'/',
      component:Home
    }
  ]  
})

new Vue({
  el:'#app',
  template:'<App />',
  router,
  components:{
    App
  }
})

App.vue 根组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {}
</style>
标签: vue-router 路由 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码