企业电话号码查询网站,专业网站建设公司兴田德润放心,wordpress文章标题插件,做网站会用到的色彩代码单词一、安装
vue-router3#xff0c;4分别对应vue2#xff0c;3.。我现在用的是vue2#xff0c;
npm install vue-router3二、使用
①首先在component路径下提前写好需要渲染的组件。 ②在App.vue中使用router声明路由。其中router-link的to指明渲染哪一个组件。router-view…一、安装
vue-router34分别对应vue23.。我现在用的是vue2
npm install vue-router3二、使用
①首先在component路径下提前写好需要渲染的组件。 ②在App.vue中使用router声明路由。其中router-link的to指明渲染哪一个组件。router-view是一个占位符每次需要渲染的组件就放在这个占位符这。
div idapph1APP组件/h1router-link to/discover发现音乐/router-linkbrrouter-link to/my我的音乐/router-linkbrrouter-link to/friends关注/router-linkbrrouter-link to/barryBarry/router-link!-- 声明路由占位标签 --!-- 每次点击组件时会渲染到router-view占位符 --router-view/router-view/div③现在只是指明了要渲染哪个组件但是这些名字和具体的component还没有对应上需要有专门的js写映射。
index.js
//在js里面定义对应关系
import VueRouter from vue-router
import Vue from vue
import Discover from /components/Discover.vue
import Friends from /components/Friends.vue
import My from /components/My.vue
import Barry from /components/Barry.vue//将VueRouter设置为Vue插件
Vue.use(VueRouter)const router new VueRouter({routes:[{path:/,redirect:/discover},{path:/discover,component:Discover},{path:/friends,component:Friends},{path:/my,component:My},{path:/barry,component:Barry}]
})//把router导出在main.js中使用
export default router④在main.js中配置一下。
import Vue from vue
import App from ./App.vue//导入router
import router from ./router/index
Vue.config.productionTip falsenew Vue({render: h h(App),router:router
}).$mount(#app)
三、路由嵌套
在Discover.vue中加两个孩子路由
divh1发现音乐/h1!-- 子路由 --router-link to/discover/toplist推荐/router-linkrouter-link to/discover/playlist歌单/router-linkhrrouter-view/router-view/div和之前的操作一样要在component下写好对应的组件文件唯一有区别的就是在index.js的Discover下写好孩子路由。
四、动态路由
就是说有一个组件会被使用多次例如音乐推荐里面用的组件都是同一个只是值不一样这个时候不能手动的一个个去写路径。直接使用动态路由即可。
例如我需要展示的是三个卡片按理说我的index.js也要写多个路径。其实感觉能用for循环
divh1我的音乐/h1router-link to/my/1收藏1/router-linkrouter-link to/my/2收藏2/router-linkrouter-link to/my/3收藏3/router-linkrouter-view/router-view/div实际上使用:id即可
{path:/my,component:My,children:[{path::id,component:MusicCard,props: true}]},除此之外呢注意到上面的代码中有个props:true的参数这里是为了让MusicCard组件接收到id参数因为我们在具体的使用中网络请求肯定会请求一系列的数据都要基于id。在MusciCard组件中声明id就能直接使用了。
templatedivh3收藏音乐{{ id }}/h3/div
/templatescriptexport default{props:[id]}
/script五、路由守卫
