2实现路由效用,2达成路由功能介绍_vue

注意:vue-router
2只适用于Vue2.x版本,下边大家是依据vue2.0讲的哪些运用vue-router
2实现路由功用。

金沙网址,转自:

npm install vue-router

注意:vue-router
2只适用于Vue2.x本子,上边我们是依照vue2.0讲的怎么着利用vue-router
2实现路由功能。
推荐应用npm安装。

一、使用路由

npm install vue-router

在main.js中,需求掌握安装路由功用:

一、使用路由
在main.js中,须求分明安装路由作用:

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App.vue'Vue.use//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//4. 创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能const app = new Vue({ router, render: h => h
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

因而地点的陈设之后吧,路由格外到的组件将会渲染到App.vue里的

1.概念组件,这里运用从别的文件import进来

那么那么些App.vue里应该这么写:

import index from './components/index.vue'
import hello from './components/hello.vue'

index.html里呢要那样写:

2.定义路由

这么就可以把渲染出来的页面挂载到那几个id为app的div里了。

const routes = [
    { path: '/index', component: index },
    { path: '/hello', component: hello },
]

二、重定向 redirect

3.创建 router 实例,然后传 routes 配置

const routes = [{ path: '/', redirect: '/index'}, // 这样进/ 就会跳转到/index{ path: '/index', component: index }]
const router = new VueRouter({
  routes
})

三、嵌套路由

4.创设和挂载根实例。通过 router
配置参数注入路由,进而让全部应用皆有路由功效

const routes = [{ path: '/index', component: index,children: [{ path: 'info', component: info}] }]
const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

透过/index/info就可以访谈到info组件了

经过地点的布局之后呢,路由极度到的零件将会渲染到App.vue里的<router-view></router-view>

四、懒加载

那么这么些App.vue里应该这么写:

const routes = [{ path: '/index', component: resolve => require(['./index.vue'], resolve) },{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },]
<template>
  <div id="app">
        <router-view></router-view>
  </div>
</template>

透过懒加载就不会一遍性把具备组件都加载进来,而是当您拜会到拾分组件的时候才会加载那么些。对于组件相当多的应用会升高第三次加载速度。

index.html里呢要如此写:

五、

<body>
    <div id="app"></div>
</body>

在vue-router 第11中学,使用的是

与上述同类就可以把渲染出来的页面挂载到这些id为app的div里了。

在vue-router 第22中学,使用了替换1版本中的a标签

二、重定向 redirect

HomeHomeHomeHomeHomeUserRegister
const routes = [
    { path: '/', redirect: '/index'},     // 这样进/ 就会跳转到/index
    { path: '/index', component: index }
]

六、路由音讯目的

三、嵌套路由

1.$route.path

const routes = [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: info}
        ]
     }
]

字符串,对应该前路由的门径,总是剖判为相对路线,如 “/foo/bar”。

经过/index/info就足以访谈到info组件了

2.$route.params

四、懒加载

二个 key/value 对象,富含了 动态片段 和
全相称片段,若无路由参数,正是二个空对象。

const routes = [
    { path: '/index', component: resolve => require(['./index.vue'], resolve) },
    { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

3.$route.query

经过懒加载就不会一次性把具备组件都加载进来,而是当您拜谒到十三分组件的时候才会加载那些。对于组件非常多的应用会进步第三回加载速度。

二个 key/value 对象,表示 URAV4L 查询参数。比如,对于路线 /foo?user=1,则有
$route.query.user == 1,若无询问参数,则是个空对象。

五、<router-link>

4.$route.hash

在vue-router 1中,使用的是
在vue-router
第22中学,使用了<router-link></router-link>替换1版本中的a标签

脚下路由的 hash 值 ,若无 hash 值,则为空字符串。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 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>

5.$route.fullPath

六、路由消息指标
1.$route.path
字符串,对相应前路由的不二诀窍,总是剖析为绝对路径,如 “/foo/bar”。
2.$route.params
多个 key/value 对象,满含了 动态片段 和
全相配片段,若无路由参数,就是二个空对象。
3.$route.query
八个 key/value 对象,表示 UXC60L 查询参数。比方,对于路径 /foo?user=1,则有
$route.query.user == 1,若无询问参数,则是个空对象。
4.$route.hash
现阶段路由的 hash 值 (不带 #卡塔尔国 ,若无 hash 值,则为空字符串。
5.$route.fullPath
姣好剖析后的 U奥迪Q3L,包蕴查询参数和 hash 的完整路线。
6.$route.matched
三个数组,包括当前路由的保有嵌套路径片段的 路由记录 。路由记录正是routes 配置数组中的对象别本(还应该有在 children 数组)。

完精通析后的 U本田CR-VL,包括查询参数和 hash 的全部路线。

综述上述,多个带有重定向、嵌套路由、懒加载的main.js如下:

6.$route.matched

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')

二个数组,富含当前路由的所有嵌套路线片段的 路由记录 。路由记录就是routes 配置数组中的对象别本。

更详细的vue-router功效请参照他事他说加以考查文档:

综合上述,一个包含重定向、嵌套路由、懒加载的main.js如下:

import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.useconst 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

如上正是本文的全体内容,希望对大家的学习抱有利于,也希望我们多多指教脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注