路由组件的搭建
- Home首页路由组件
- Search 路由组件
- Login 登录路由
- Refister 注册路由
基于 vue-router 实现路由搭建,需要下载依赖
cnpm install --save vue-router
在 src 文件夹下创建 pages 文件夹,并在 pages 文件夹下创建4个文件,分别是 Home、Search、Login、Refister
在这刚创建好的4个文件夹下分别都创建 index.vue 文件
在相应的文件夹下的 index.vue 做好标识
示例 Home/index.vue:
<template>
<div>
我是首页
</div>
</template>
<script>
export default {
name:''
}
</script>
<style scoped>
</style>
配置路由
一般放在 router 文件夹里
在 src 文件夹下创建 router 文件夹 ,并在内创建 index.js 文件
index.js
//配置路由的地方
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//引用路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Refister from '@/pages/Refister'
import Search from '@/pages/Search'
//配置路由
export default new VueRouter({
//配置路由
routes:[
{
path:'/home',
component:Home
},
{
path:'/login',
component:Login
},
{
path:'/refister',
component:Refister
},
{
path:'/search',
component:Search
}
]
})
打开 main.js 文件
import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from '@/router'
new Vue({
render: h => h(App),
//注册路由:底下的写法kv一致,省略v【router: router =>router】
router
}).$mount('#app')
打开 App.vue 文件
<!--路由出口的地方-->
<router-view></router-view>
重定向
在 router 下的 index.js 进行重定向,在项目跑起来的时候,一访问,立马让他定向到首页
index.js
//重定向
{
path:'*',
redirect:'/home'
}
打开地址栏可以切换组件
总结
路由组件与非路由组件的区别
- 路由组件一般放置在 pages|views 文件夹,非路由组件一般放置在 components 文件夹中
- 路由组件一般需要在 router 文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用
- 注册完路由,不管是路由组件还是非路由组件身上都有 $route 和 $router 属性
路由跳转
点击登录和注册分别跳转到 Login 页面和 Serch 页面
路由的跳转有两种形式:
- 声明式导航 router-link,可以进行路由的跳转
- 编程式导航 push | replace,可以进行路由跳转
编程式导航:声明式导航能做的,编程式导航都能做,但是编程式导航除了可以进行路由跳转,还可以做一些其他业务逻辑
打开 Header 文件下的 index.vue
把
<a href="###">登录</a>
<a href="###" class="register">免费注册</a>
改为
<router-link to="/login">登录</router-link>
<router-link class="register" to="/refister">免费注册</router-link>
把
<a class="logo" title="尚品汇" href="###" target="_blank">
<img src="./images/logo.png" alt="">
</a>
改为
<router-link class="logo" to="/home">
<img src="./images/logo.png" alt="">
</router-link>
再将搜索按钮添加路由
这里使用编程式导航
改为上图所示