引用vue.js使用路由的方法

这篇文章主要介绍引用vue.js使用路由的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

直接引用vue.js使用路由的方法:首先引入【vue.js】和【vue-router.JS】,然后创建挂载的dom元素,并创建路由组件,接着定义路由,并创建路由器实例;最后创建vue实例并挂载。

<强>直接引用vue。js使用路由的方法:

<强>直接引入vue。js的方式使用路由很简单,只需要再直接引入一个<代码> vue-router。JS代码即可。

具体的实现步骤:

1,引入vue。JS和vue-router。JS

2,创建挂载的dom元素

& lt; div  id=癮pp"祝辞& lt;/App>

3,创建路由组件

const  com1 =, { 　　模板:& # 39;& lt; div 祝辞,路由,1 & lt;/div> & # 39; 　　} 　　const  com2 =, { 　　模板:& # 39;& lt; div 祝辞,路由,2 & lt;/div> & # 39; 　　}

4,定义路由

const  routes =, ( 　　,,{,路径:& # 39;/hash2& # 39;,,组件:,com1 }, 　　,,{,路径:& # 39;/hash3& # 39;,,组件:,com2 } 　　)

5,创建路由器实例

const  router =, new  VueRouter ({ 　　,,,的路线 　　})

6,创建vue实例并挂载

const  App =, vue ({new  　　,路由器 　　})。美元山(& # 39;#应用# 39;);

下面是具体的代码:

& lt; ! DOCTYPE  HTML> 　　& lt; HTML> 　　,, 　　& lt;才能head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,,,& lt; meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　,,,& lt; title> 　　,,,,,文档 　　,,,& lt;/title> 　　,,,& lt; https://www.yisu.com/zixun/script  src=" https://unpkg.com/vue/dist/vue.js "> 　　

　　

　　你好! 　　

　　

　　 　　 　　默认会被渲染成一个“<>”标签- -> 　　 　　切换至com1 　　 　　 　　切换至com2 　　 　　

　　 　　 　　 　　 　　 　　 　　 - -> 　　渲染成某种标签,例如<李>。于是我们使用 　　标签道具类指定何种标签,同样它还是会监听点击,触发导航。--> 　　 foo - -> 　　 　　 　　

　　身体 　　<>脚本//1。定义(路由)组件。 　　const com1={ 　　模板:“

路由1

' 　　} 　　const com2={ 　　模板:“

路由2

　　}//2。定义路由//每个路由应该映射一个组件。其中“组件”可以是通过Vue.extend ()//创建的组件构造器,或者,只是一个组件配置对象。 　　const路线=[{ 　　路径:/hash2, 　　组件:com1 　　}, 　　{ 　　路径:/hash3, 　　组件:com2 　　})//3。创建路由器实例,然后传“路线”配置 　　const路由器=new VueRouter ({ 　　路线//(缩写)相当于路线:路线 　　}）//4。创建和挂载根实例。//要通过路由器配置参数注入路由,从而让整个应用都有路由功能 　　const应用=new Vue ({ 　　路由器 　　})。美元山(“#应用”);//el是自动挂载,山是手动挂载(延时)>

以上是“引用vue.js使用路由的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

引用vue.js使用路由的方法