澳门新萄京8522利用Vue-Router 二落成路由功效

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

一、使用路由
在main.js中,要求确定安装路由功效:

那正是说那个App.vue里应该如此写:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

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

二.定义路由

综合上述,一个暗含重定向、嵌套路由、懒加载的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')
npm install vue-router
<template>
  <div id="app">
        <router-view></router-view>
  </div>
</template>

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

<!-- 字符串 -->
<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>
const routes = [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: info}
        ]
     }
]
npm install vue-router

五、<router-link>

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

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

index.html里吧要那样写:

2.定义路由

透过地点的安顿之后吧,路由非常到的零部件将会渲染到App.vue里的<router-view></router-view>

由此地点的配置之后呢,路由非凡到的机件将会渲染到App.vue里的<router-view></router-view>

五、<router-link>

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

留神:vue-router
1头适用于Vue二.x本子,上边我们是依照vue贰.0讲的哪些采用vue-router
二完结路由成效。
推荐使用npm安装。

澳门新萄京8522,一、使用路由
在main.js中,必要显明安装路由成效:

四、懒加载

二、重定向 redirect

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

四.创立和挂载根实例。通过 router
配置参数注入路由,从而让壹切应用都有路由功效

index.html里啊要如此写:

一.概念组件,这里运用从此外文件import进来

经过懒加载就不会三次性把富有组件都加载进来,而是当您拜访到充足组件的时候才会加载那些。对于组件相比较多的应用会提升第1回加载速度。

那般就能够把渲染出来的页面挂载到那一个id为app的div里了。

发表评论

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

网站地图xml地图