vue项目中组件一般在src/components
中
在vue中组件一般有两种用法 第一种是直接引用 第二种是通过路由调用
直接引用
导入用使用的组件文件夹,然后声明组建,就可以直接使用了
<template>
<div id="app">
<tou></tou>
</div>
</template>
<script>
import tou from "./components/tou.vue";
export default {
components: { tou },
methods: {},
name: "App",
data() {
return {
btnFlag: false
};
},
};
</script>
通过路由动态调用
先配置路由信息 路由子啊src/route
r中
-先在根目录下main.js
中引入
import router from './router'
在路由的js文件中引入组件
然后设置page
name
和component
import Vue from 'vue'
import Router from 'vue-router'
import homepage from '@/components/homepage'
import list from '@/components/list'
import article from '@/components/article'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/list',
name: 'list',
component: list
} ,
},
})
在组件中使用
<template>
<div id="homepage">
<div class="left">
<router-view></router-view>
</div>
<router-link to="/list" id="menu_btn" class="target menu_btn">
</div>
</template>
-
<router-view></router-view>代表路由结果显示的位置
- to="/list" 要使用的路由page
默认路由和路由重定向
默认路由
import Vue from 'vue'
import Router from 'vue-router'
import homepage from '@/components/homepage'
import list from '@/components/list'
import article from '@/components/article'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
redirect:'/homepage',//设置默认只指向的路径
name:'zhuye'
},
{
path: '/homepage',
name: 'homepage',//设置默认指向的路径指向的是下面的homepage组件
component: homepage,
},
],
})
路由重定向
如果我们要让homepage立马加载list组件是就得使用路由重定向
routes: [
{
path: '/homepage',
name: 'homepage',
component: homepage,
redirect:'/list',//设置重定向路由加载的指向路径
children: [
{
{
path: '/list',//设置默认指向的路径指向的是下面的list组件
name: 'list',
component: list
} ,
{
path: '/articel/:id',
name: 'articel',
component: article,
}
]
},
],