1. 在 main.js 中导入 vue-router 和组件
import VueRouter from ‘vue-router’; // 导入 vue-router 并将它命名为 VueRouter
import goods from ‘./components/goods/goods’; // 引入组件
import seller from ‘./components/seller/seller’;
2. 为组件设置 URL, 通过 url 可以动态的加载组件
const urls = [
{path: ‘/goods’, component: goods},
{path: ‘/rating’, component: rating},
{path: ‘*’, redirect: ‘/goods’} // 无效路径重点向到 ’/goods’
];// 定义一个常量来将 url 和组件绑定起来
3. 配置 vue-router 对象并挂载
const router = new VueRouter(// 新建一个 vue-router 对象
{
routes: urls 将组件 (components) 映射到路由 (routes)，
}
);
new Vue({
el: ‘#app’,
router, // 注册你新建的 vue-router 对象
render: h => h(App)
});
4. 配置连接的出口, 实现动态的加载组件
<router-view></router-view> // 通过模板中放置元素来确定 vue-router 渲染组件的位置
现在, 可以通过 url 动态加载我们的组件
5. 将连接入口, 挂载到网页上
<router-link to=”/goods”> 商品 </router-link> // 本质上是个 a 标签,to 关联了跳转的 url
可以通过点击商品和评论完成页面局部的刷新
步骤总结
1. 在 main.js 中导入 vue-router 和自定义的组件 2. 常量定义 url 和组件的关联 3. 创建 vue-router 对象并导入组件关系, 并注册 4. 在模板中定义渲染的出口 <router-view></router-view> 和入口 <router-link to=” “> 商品 </router-link> 官方起步文档:https://router.vuejs.org/zh/g…