Vue路由基础详解-优快云博客

路由基础

用路由代替组件的使用。

路由安装

npm i vue-router

基本使用

在main.js中

// 引入VueRouter
import VueRouter from 'vue-router';
// 全局使用路由
Vue.use(VueRouter);

//创建组件
//引入组件
import home from './components/home.vue';
import login from './components/login'
import register from './components/register'

// 实例化路由,并配置路径
let router = VueRouter({
    routes: [
        { path: '/home', component: home },
        { path: '/login', component: login },
        { path: '/register', component: register },
        { path: '*', redirect: '/home' } //重定向
    ]
});

new Vue({
    render: h => h(App),
//把路由实例化对象放在Vue的实例上
    router
}).$mount('#app')

app.vue

<template>
  <div id="app">
    <!--  app.vue中放置 router-view组件，路由出口 -->
    <router-view></router-view>
  </div>
</template>

路由重定向

{ path:'*',redirect:'/home' },//重定向

路由模式（mode）

下载时选项

将路径映射到组件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a5HknffT-1637320198282)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/%E7%AC%94%E8%AE%B0/assets/1636614308998.png)]

history: 选n地址栏会出现#号，y无#号

设置模式mode

const router = new VueRouter({
  //路由规则
  routes,
  //history 不带# ,hash是带#
  mode:"history"
})

开发环境下，hash和history没有区别
hash和history的区别是在生产环境下：上线

    hash 
      1.前进 后退 刷新ok
      "http://localhost:3000/#/login"  "#/login"是hash值，hash的改变不会影响请求
      2.采用的是window.onhashchange=()=>{}实现的

    history 
      1.前进 后退ok 刷新（404，数据）
      一旦刷新，就是get请求是真实的路由，那么就走了后端路由，如果后端有这个路由，直接数据展示，如果后端没有该路由，会404
      2.采用HTML5新增的interface 里面的pushState() replaceState()
      3.工作的时候如果要用history，需要后端配合

https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

<footer class="footer">
  	<router-link to="/index/home" active-class="active">首页</router-link>
      <router-link to="/index/cates"  active-class="active">分类</router-link>
      <router-link to="/index/cart"  active-class="active">购物车</router-link>
      <router-link to="/index/my"  active-class="active">我的</router-link>
</footer>

.footer .active{
  background: pink;
  color: white;
}

编程式导航

编程式导航即使用js的方式跳转

编程导航

this.$router.push('path') //添加了一条新的历史记录 router-link默认就是push
this.$router.replace('path') //用新的记录替换当前历史记录
this.$router.go(-1) //返回之前页面

vue 跳转：

 <!-- 编程式导航跳转 -->
<button @click="goLogin">跳转到我的</button>
<button @click="$router.push('/index/my')">跳转到我的</button>

 goLogin(){
      let username = 'adf'
      if( username == '' ){
        alert('请输入用户名')
        return
      }
      //判断成功了，跳转到我的页面
       this.$router.push('/index/my')
    }

 <!-- push应用场景 1. 淘宝app首页  2. 点击搜索   3. 搜索列表页   4. 点击某个商品进入详情页 -->
    <h2> push-添加一条历史记录并跳转</h2>
    <button @click="$router.push('/search')">跳转到搜索页</button>

<!-- repalce应用场景 5. 加入购物车 6. 下单 7确认订单 8提交订单并支付  9 replace跳转到订单详情页 -->
    <h2> replace 不保留历史记录</h2>
    <button @click="$router.replace('/search')">跳转到搜索页</button>

 <button @click="$router.go(-1)">返回</button>
<!--如-2则退两个页面，但如使用replace跳转来的则不计入。-->
 <button @click="$router.go(-2)">返回</button>

嵌套路由[二级路由]

const router = new VueRouter({
  routes:[
    // 第1层的配置就是一级路由
    { path:'/list',component:list },
    { path:'/login',component:login },
    { path:'/detail',component:detail },
    { 
      path:'/index',  //称为大首页
      component:index,
        //二级路由，path不需要加 '/'
      children:[ 
        { path:'cart',component:cart },
        { path:'home',component:home },
        { path:'my',component:my },
      //{ path:'*',redirect:"/index/home" }, //如果二级路由写 * 那么重定向地址要写全
        { path:'',redirect:"home" }
    },
    {
      path:'*',
      redirect:'/index'
    }
  ]
})

注意：

在 index组件（一级路由）的页面里，必须在加 router-view 这个出口

封装

封装过滤器

formatter.js

let formatter = (e,type)=>{
}
export default formatter

filters/index.js

import Vue from 'vue'

import priceToFixed from './price.js'
import formatter from './formatter.js'

// Vue.filter('priceToFixed',priceToFixed)
// Vue.filter('formatter',formatter)

let filters = {
    priceToFixed,
    formatter
}

for(let key in filters){
    Vue.filter(key,filters[key])
}

main.js

// 引入一下过滤器的封装和优化
import './filters/index.js'

封装全局组件

按照之前全局组件的语法封装了两个组件，返回/搜索

原则上要保证main.js干净。

在components下创建index.js

import Vue from 'vue'

//设置一个全局组件
import searchBtn from './searchBtn'
import goBack from './goBack'

// Vue.component( 'searchBtn',searchBtn )
// Vue.component( 'goBack',goBack )
let coms = {
    searchBtn,
    goBack
}

for(let key in coms){
    Vue.component( key,coms[key] )
}

再在main.js中引入即可

// 引入一下全局组件文件即可
import './components/index.js'

静态资源

字体图标

先下载图标，把整体放到assets文件夹下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hMMQUwl1-1637320198285)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day07/%E7%AC%94%E8%AE%B0/assets/1636683640768.png)]

在main.js中引入iconfont.css。

//字体样式
import './assets/iconfont/iconfont.css'

在组件中使用字体图标。

assets/public

组件中使用assets下的资源使用相对路径

组件中使用public下的资源使用 ‘ / ’ 开头，并且不包含public

<h2>assets</h2>
<img src="../../assets/erha2.jpg" class="img" alt="">
<h2>public-</h2>
<img src="/images/erha1.jpg" class="img"  alt="">

样式

reset.css 重置样式的。

rem.js / rem的配置

如果设计是 750，那么就把这些改成750

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EDwxQI8L-1637320198287)(assets/1636620221664.png)]

安装 px to rem的vscode插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ly26hKbM-1637320198292)(assets/1636620273446.png)]

c下的资源使用 ‘ / ’ 开头，并且不包含public

<h2>assets</h2>
<img src="../../assets/erha2.jpg" class="img" alt="">
<h2>public-</h2>
<img src="/images/erha1.jpg" class="img"  alt="">

样式

reset.css 重置样式的。

rem.js / rem的配置

如果设计是 750，那么就把这些改成750

[外链图片转存中…(img-EDwxQI8L-1637320198287)]

安装 px to rem的vscode插件

[外链图片转存中…(img-Ly26hKbM-1637320198292)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yq93hHBg-1637320198294)(assets/1636620355714.png)]

vue路由基础