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

news/2024/4/29 15:26:04/文章来源:https://blog.csdn.net/bying666/article/details/126934943

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

1.安装vue-router

npm i vue-router --save

分析结构可知，路由组件有四个：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'}]
})

4.在main.js中引入

在这里插入图片描述

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

在这里插入图片描述

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

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

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

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

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

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

总结

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

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

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