vue项目实战-完成路由组件的搭建

vue项目实战-完成路由组件的搭建

1.安装vue-router

npm i vue-router --save
1

分析结构可知，路由组件有四个：Home、Search、Login、Register

2.创建路由组件文件夹pages以及各路由组件

3.配置路由

项目中配置路由一般配置在router文件夹中，创建一个router文件夹，在其下新建index.js

//配置路由的地方（index.js）

import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)

//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'

//配置路由
export default new VueRouter({
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/search',
            component:Search
        },
        {
            path:'/login',
            component:Login
        },
        {
            path:'/register',
            component:Register
        },
        //重定向
        {
            path:'*',
            redirect:'/home'
        }
    ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

4.在main.js中引入

5.在App.vue中配置路由组件出口

6.在路由跳转处声明要跳转的组件路由

在组件Header中有多个超链接跳转到路由组件

<p>
  <span>请span>
  <router-link to="/login">登录router-link>
  <router-link to="/register">免费注册router-link>
p>
1
2
3
4
5

 <h1 class="logoArea">
   <router-link class="logo" title="尚品汇" to="/home">
     <img src="./images/logo.png" alt="" />
   router-link>
 h1>
1
2
3
4
5

<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
   搜索
button>
1
2
3

//搜索的回调函数
      goSearch(){
        //使用编程式导航
        this.$router.push('/search')
      }
1
2
3
4
5

总结

1）路由组件与非路由组件的区别？

1：路由组件一般放置在pages|views文件夹，非路由组件一般放置在components文件夹中
2：路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
3：注册完路由，不管路由组件、非路由组件身上都有 ”$route“、”$router“属性

$route: 一般获取路由信息【路径、query、params等】
$router:一般进行编程式导航进行路由跳转【push | replace】

2）路由的跳转？

路由的跳转有两种形式：
1：声明式导航router-link，可以进行路由的跳转
2：编程式导航push | replace，可以进行路由跳转

编程式导航：声明式导航能做的，编程式导航都能做，
因为编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑