使用路由前先需要安装vue-router:
命令为:npm install veu-router --save
1.路由创建:
需要提供的配置文件:在项目的src目录下创建router.js文件,也可以直接添加进App.vue。如果选择配置router.js文件,需要将其导入App.vue内。
在使用前需要导入vue-router并进行使用。
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
导入完成后,需要创建实例,具名或匿名导出。下方是匿名导出路由,导入其他页面组件,进行路由配置。路由内component是配置页面其他子组件的内容
component: () => import('./views/About.vue') 起到了懒加载的作用 。
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
},{
path: '/carousel',
name: 'carousel',
component: Carousel
}
]
})
配置路由的部分部分完成。
2.路由使用
实现的文件为App.vue文件,其添加导航的位置在<div id="app"></div>下,可使用router-link实现路由。router-view 实现路由内容的地方,引入组件时写到需要引入的地方。需要注意的是,使用vue-router控制路由则必须router-view作为容器。
<dvi id="app"></div>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/carousel">Carousel</router-link>
</div>
<router-view/>
</div>
同时,在添加完成后需要在根节点上进行挂载。
new Vue({
// router 路由必须加在挂载点上
router,
render: h => h(App)
}).$mount('#app')
引入需要路由的组件,添加路由操作完成。
在router-link这里添加时,可以选用多种方式。
<!-- 路径方式 -->
<!-- 静态导航 -->
<router-link to="/">Home</router-link>
<!-- 命名路由的方法,此方法必须给路由命名 -->
<router-link :to="{ path: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ path: 'about' }">About</router-link>
<router-link :to="about">About</router-link>
<!-- 命名的路由 -->
<router-link :to="{ path: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
在组件内添加 tag 标签,可以指定导航展示的标签:
<router-link :to="apple" tag="li"></rpouter-link>
最终这个导航菜单展示的为li标签。
路由内子路由的添加:
{
path: '/about',
name: 'about',
component: About,
// 这个添加的是子路由,可/red进行查看页面内的东西
children:[
{
path:' red',
component: RedApple
}
]
}
过渡属性
有过渡属性时,需要进行加载,可以添加transition标签进行切换,及keep-alive标签进行缓存,避免在每次加载的时候都需要重新加载视图。
<transition name=”fade”>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
具名视图
视图 router-view也可以添加名称,在componnets内根据不同视图展示不同的组件。
<router-view name="comA"/>
<router-view name="comB"/>
路由重定向
使用redirect将指定 主页的内容 “/” 重定向到“/home” 内。
{
// 路由的重定向
path:'/',
redirect: '/home'
},
编程式导航
通过js添加导航,与router-link实现效果一致:
router.push({path:'apple',params:{name:"test"}})