vue-router 2.0
2017-06-02 14:05
309 查看
注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。
推荐使用npm安装。
一、使用路由
在main.js中,需要明确安装路由功能:
1.定义组件,这里使用从其他文件import进来
2.定义路由
3.创建 router 实例,然后传 routes 配置
4.创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
经过上面的配置之后呢,路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>
那么这个App.vue里应该这样写:
推荐使用npm安装。
npm install vue-router
一、使用路由
在main.js中,需要明确安装路由功能:
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter)
1.定义组件,这里使用从其他文件import进来
import index from './components/index.vue' import hello from './components/hello.vue'
2.定义路由
const routes = [ { path: '/index', component: index }, { path: '/hello', component: hello }, ]
3.创建 router 实例,然后传 routes 配置
const router = new VueRouter({ routes })
4.创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
const app = new Vue({ router, render: h => h(App) }).$mount('#app')
经过上面的配置之后呢,路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>
那么这个App.vue里应该这样写:
<template> <div id="app"> <router-view></router-view> </div> </template>
相关文章推荐
- vue-router(2.0)
- vue-lazyload基础实例(基于vue2.0和vue-router2.0)
- vue-router(2.0)之什么是路由以及使用步骤(笔记)
- vue-router2.0 组件之间传参及获取动态参数
- vue2.0使用vue-router
- 从零开始,零基础,一点一点探索vue-router(vue2.0)
- vue2.0 router 传递参数
- 详解vue-router 2.0 常用基础知识点之router.push()
- Vue-router2.0基础实践
- 详解vue-router2.0动态路由获取参数
- Vue-Router2.0教程
- 详解vue-router 2.0 常用基础知识点之导航钩子
- Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
- vue-router2.0 组件之间传参及获取动态参数
- vue-router 2.0 常用基础知识点之router-link
- vue-router 2.0 常用基础知识点之router.push()
- vue.js中的路由vue-router2.0使用
- 详解vue-router 2.0 常用基础知识点之router-link
- vue-router 2.0 常用基础知识点之导航钩子
- Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS