router-view的使用方法:
在vue里面是使用<router-link to=
"/"
>来跳转路由的
1.在需要使用跳转的组件里,使用<router-link to=
"/"
>
如:下图1
2.在需要使用跳转的组件里,使用
<router-view></router-view>
这样的话,路由匹配到的组件将渲染显示在这里
如:下图2
3.在index.js里面设置路由:
需要导入import然后写路由参数path,name,component等
如下图:
===============================================================================
components的使用方法:
1.新建组件TopNav.vue
<template>
<div class="TopNav">
<div>
<router-link to="/">首页</router-link>
<router-link to="/music">音乐</router-link>
<router-link to="/itemBank">题库</router-link>
<router-link to="/news">图片</router-link>
<router-link to="/about">个人中心</router-link>
<router-link to="login">登录</router-link>
</div>
<!-- 路由出口-->
<!-- 路由匹配到的组件将渲染显示在这里-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'TopNav',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav a {
color: #42b983;
margin: 0 10px;
}
</style>
2.想在哪里复用就操作哪个文件,我这里是在App.vue里面复用这个组件:
关键步骤:
在script里面import
然后设置components
然后在template里面使用要复用的这个标签即可
App.vue
<template>
<div id="app">
<TopNav/>
</div>
</template>
<script>
import './assets/css/my.css'
import TopNav from "./components/TopNav";
export default {
name: 'App',
components:{
TopNav
},
methods: {
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
完成!
参考: