Vue 前台项目（电商）3

路由组件的搭建

• 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'
        }

打开地址栏可以切换组件

总结

路由组件与非路由组件的区别

1. 路由组件一般放置在 pages|views 文件夹，非路由组件一般放置在 components 文件夹中
2. 路由组件一般需要在 router 文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
3. 注册完路由，不管是路由组件还是非路由组件身上都有 $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>

再将搜索按钮添加路由

这里使用编程式导航

改为上图所示