第二步,Vue Router安装和使用
在前面第一步已经搭建好了Vue的开发环境,现在安装和使用VUE路由器动态路由。第一步安装vue router:打开cmd进入工作目录即firstVue所在的文件夹,输入命令安装vue router:npm install vue-router安装完成之后,开始使用vue router:①我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue:② 到router文件夹下》inde..
·
在前面第一步已经搭建好了Vue的开发环境,现在
安装和使用VUE路由器动态路由。
第一步安装vue router:
打开cmd进入工作目录即firstVue所在的文件夹,输入命令安装vue router:npm install vue-router
安装完成之后,开始使用vue router:
①我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue:
② 到
router文件夹下
》
index.js文件
》打开并输入:
注意:由于引用了@/components/HelloWorld,却没有使用,可能报错,可以删除import HelloWorld from...
③ 再到
test.vue
组件中敲:
$route.params.testId
就是获取当前路由的参数。
④打开cmd ,在firstVue目录下输入 npm run dev:
然后成功后显示:
向浏览器输入:http://localhost:8080/#/test/123显示:
成功安装和使用路由。
接下来练习一下:
①修改index.js路由文件:
②修改test.vue文件:
③打开cmd ,在firstVue目录下输入 npm run dev,然后向浏览器输入:http://localhost:8080/#/test/123/name/xxx显示:
完成。
更多推荐
已为社区贡献3条内容
所有评论(0)