vue2.0+vue-cli+webpack+vue-router中路由设定
2017-11-01 10:46
781 查看
首先安装vue-router
npm install vue-router
一、使用路由
1、在main.js中,需要明确安装的路径
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
new Vue({
el: ‘#app’,
router,
template: ‘’,
components: { App }
})
2、在router-index.js中引入其他组件
3、创建路由
经过上面的配置之后呢,路由匹配到的组件将会渲染到App.vue里的
那么这个App.vue里应该这样写:
二、重定向redirect
三、嵌套路由
通过/index/info就可以访问到info组件了
四、懒加载
通过懒加载就不会一次性把所有组件都加载进来,而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
五、
在vue-link1中,使用的是a标签
在vue-link2中,使用来代替a标签
六、路由信息对象
1.
字符串,对应当前路由的路径,总是解析为绝对路径,如 “
2.
一个
3.
一个
4.
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。
5.
完成解析后的 URL,包含查询参数和 hash 的完整路径。
6.
一个数组,包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本(还有在 children 数组)。
综合上述,一个包含重定向、嵌套路由、懒加载的main.js如下:
npm install vue-router
一、使用路由
1、在main.js中,需要明确安装的路径
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
new Vue({
el: ‘#app’,
router,
template: ‘’,
components: { App }
})
2、在router-index.js中引入其他组件
import Vue from 'vue' import App from '@/App' import Router from 'vue-router' import VueResource from 'vue-resource' import goods from '@/components/goods/goods' import ratings from '@/components/ratings/ratings' import seller from '@/components/seller/seller'
3、创建路由
export default new Router({ routes: [ {path: '/goods', component: goods}, {path: '/ratings', component: ratings}, {path: '/seller', component: seller} ] })
经过上面的配置之后呢,路由匹配到的组件将会渲染到App.vue里的
那么这个App.vue里应该这样写:
<template> <div id="app"> <router-view></router-view> </div> </template>
二、重定向redirect
routes: [{ path: '/', redirect: '/index' }]
三、嵌套路由
const routes = [ { path: '/index', component: index, children: [{ path: 'info', component: info} ] }]
通过/index/info就可以访问到info组件了
四、懒加载
const routes = [ { path: '/index', component: resolve => require(['./index.vue'], resolve) }, { path: '/hello', component: resolve => require(['./hello.vue'], resolve) }, ]
通过懒加载就不会一次性把所有组件都加载进来,而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
五、
在vue-link1中,使用的是a标签
在vue-link2中,使用来代替a标签
<!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a> &l ba61 t;!-- 使用 v-bind 的 JS 表达式 --> <router-link v-bind:to="'home'">Home</router-link> <!-- 不写 v-bind 也可以,就像绑定别的属性一样 --> <router-link :to="'home'">Home</router-link> <!-- 同上 --> <router-link :to="{ path: 'home' }">Home</router-link> <!-- 命名的路由 --> <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> <!-- 带查询参数,下面的结果为 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
六、路由信息对象
1.
$route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如 “
/foo/bar“。
2.
$route.params
一个
key/value对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
3.
$route.query
一个
key/value对象,表示 URL 查询参数。例如,对于路径
/foo?user=1,则有
$route.query.user ==1,如果没有查询参数,则是个空对象。
4.
$route.hash
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。
5.
$route.fullPath
完成解析后的 URL,包含查询参数和 hash 的完整路径。
6.
$route.matched
一个数组,包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本(还有在 children 数组)。
综合上述,一个包含重定向、嵌套路由、懒加载的main.js如下:
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App' Vue.use(VueRouter) const router = new VueRouter({ routes:[ { path: '/', redirect: '/index' }, { path: '/index', component: resolve => require(['./components/index.vue'], resolve), children:[ { path: 'info', component: resolve => require(['./components/info.vue'], resolve) } ] }, { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) }, ] }) const app = new Vue({ router, render: h => h(App) }).$mount('#app')
相关文章推荐
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- 基于webpack+Vue2.0搭建webapp(vue-cli原理)
- vue-cli#2.0 webpack 配置分析
- Vue.js结合vue-router和webpack编写单页路由项目
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- Vue.js结合vue-router和webpack编写单页路由项目
- Vue-cli+router+webpack
- Vue.js结合vue-router和webpack编写单页路由项目
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
- vue-cli#2.0 webpack 配置分析
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- vue-cli + webpack + vue-router
- Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
- vue-cli#2.0 webpack 配置分析
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- vue-cli#2.0 webpack 配置分析