Vue中路由的基本使用方法
2019-03-20 本文已影响0人
雪映月圆
基本使用步骤
- 下载并引入 vue-router.js 模块
- 创建路由配置对象
const routes = [ { path:'路径名1', component: '组件名1' }, { path:'路径名2', component:'组件名2', ... } ]- 创建路由实例
const router = new VueRouter({ routes })- 在 new Vue 的配置中使用路由实例
注意事项
- 在路由配置对象中，一级配置路径对应的组件将会显示在 new Vue对应组件模板的 router-view 标签中
- 在一级配置的 children 中的路由配置，路径对应的组件将会显示在父路由对应组件的组件模板的 router-view 标签中
- 尽可能的保证new Vue的组件模板中只有一个 router-view 标签, 这样方便动态替换其中的内容
完整的路由使用实例
<body>
<div id="app">
<!-- 路由配置对象中的直接子对象路径对应的组件会显示在这个router-view中 -->
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
const index = {
template: `
<div>
<router-view></router-view>
<div>
<router-link v-for="(tab, index) in tabs" :key="index" :to="tab.link">{{ tab.name }}</router-link>
</div>
</div>
`,
data: function(){
return {
tabs: [
{ name: "首页", link: "/"},
{ name: "发现", link: "/discover"},
{ name: "订单", link: "/order" },
{ name: "我的", link: "/profile"}
]
}
}
}
const Discover = {
name: "discover",
template: `
<div>发现</div>
`
}
const Order = {
name: "order",
template: `
<div>订单</div>
`
}
const Profile = {
name: "profile",
template: `
<div>
我的
<router-link to="/shop">金币商城</router-link>
</div>
`
}
const Shop = {
template: `
<div>
金币商城
<router-link to="/">首页</router-link>
</div>
`
}
// 1. 创建路由配置对象
const routes = [
{
path: "/",
component: index,
children: [
{ path: "", component: {template:`<div>首页</div>`}},
{ path: "discover", component: Discover },
{ path: "order", component: Order },
{ path: "profile", component: Profile }
]
},{
path: "/shop",
component: Shop
}
];
// 2. 创建路由实例
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "active1"
});
const vm = new Vue({
el: "#app",
// 3. 在app中使用路由
router
});
</script>
</body>
