在前面第一步已经搭建好了Vue的开发环境,现在

安装和使用VUE路由器动态路由。

第一步安装vue router:

打开cmd进入工作目录即firstVue所在的文件夹,输入命令安装vue router:npm install vue-router

第二步,Vue Router安装和使用

安装完成之后,开始使用vue router:

①我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue:

第二步,Vue Router安装和使用


② 到router文件夹下index.js文件 》打开并输入:
第二步,Vue Router安装和使用
注意:由于引用了@/components/HelloWorld,却没有使用,可能报错,可以删除import HelloWorld from...


③ 再到test.vue组件中敲:
第二步,Vue Router安装和使用
$route.params.testId就是获取当前路由的参数。
④打开cmd ,在firstVue目录下输入 npm run dev:
第二步,Vue Router安装和使用

然后成功后显示:

第二步,Vue Router安装和使用

向浏览器输入:http://localhost:8080/#/test/123显示:

第二步,Vue Router安装和使用

成功安装和使用路由。


接下来练习一下:

①修改index.js路由文件:

第二步,Vue Router安装和使用

②修改test.vue文件:

第二步,Vue Router安装和使用

③打开cmd ,在firstVue目录下输入 npm run dev,然后向浏览器输入:http://localhost:8080/#/test/123/name/xxx显示:

第二步,Vue Router安装和使用

完成。




相关文章:

  • 2021-11-27
  • 2022-12-23
  • 2022-12-23
  • 2021-05-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-12
猜你喜欢
  • 2021-09-20
  • 2022-12-23
  • 2021-04-22
  • 2021-10-30
  • 2022-12-23
  • 2022-12-23
  • 2021-09-25
相关资源
相似解决方案