vue-router 起步步骤详解
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/guide/#html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍vue项目创建步骤及路由router，包括了vue项目创建步骤及路由router的使用技巧和注意事项，需要的朋友参考一下 1、创建一个vue项目步骤 （windows环境下）。创建vue项目前，检查系统是否具备创建项目的条件（是否已经安装好了node.js、webpack、vue-cli）。cmd打开终端。 1.1 如果还没安装node.js， 则先安装node.js ，安装完成后，
-
本文向大家介绍vue-cli构建vue项目的步骤详解，包括了vue-cli构建vue项目的步骤详解的使用技巧和注意事项，需要的朋友参考一下 构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具，其作用就是用配置好的模板迅速搭建起一个项目工程来，省去自己配置 webpack 配置文件的基本内容，大大降低了初学者构建项目的难度。这节我们看看如何使用
-
本文向大家介绍vue-cli安装使用流程步骤详解，包括了vue-cli安装使用流程步骤详解的使用技巧和注意事项，需要的朋友参考一下 1.全局安装vue-cli cnpm i vue-cli -g 2.监测安装版本 vue -V 大写V : version 3.指定目录下新建项目 vue init webpack [项目名] 按自己的意愿配置、选择对应信息。最后配置完成检查package.json是
-
我想在每个步骤之前和之后执行一些操作（而不是场景）。用cucumber怎么做？ 就像jUnit中的后和前。 **我正在使用java。
-
本文向大家介绍给vue项目添加ESLint的详细步骤，包括了给vue项目添加ESLint的详细步骤的使用技巧和注意事项，需要的朋友参考一下 eslint配置方式有两种： 1.注释配置：使用js注释来直接嵌入ESLint配置信息到一个文件里 2.配置文件：使用一个js，JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写在一个文件名为.eslintrc.*的文件或者在pack
-
本文向大家介绍mysql 8.0.11 安装步骤详解，包括了mysql 8.0.11 安装步骤详解的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了mysql 8.0.11 安装步骤，供大家参考，具体内容如下 第一步：下载安装包 MYSQL官方下载地址：官方下载 这里第一项是在线安装，第二项是离线包安装，我选择的是第二项(不用管你电脑是多少位的操作系统)，因为： Note: MySQL