欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue_4

程序员文章站 2022-03-16 08:18:36
...

Vue项目mint-ui引入方式

1、完整引入

  • 安装mint-ui:
  1. npm intall mint-ui --save
  • main.js 中引入:
  1. import MintUI from 'mint-ui'
  2. import 'mint-ui/lib/style.css'
  3. Vue.use(MintUI)
  • 页面调用
  1. <mt-header fixed title="固定在顶部"></mt-header>

2、按需引入

  • 安装mint-ui:
  1. npm intall mint-ui --save
  • 安装 babel-plugin-component:
  1. npm install babel-plugin-component -D

注:借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

  • 修改.babelrc:
  1. "plugins": [["component", [
  2. {
  3. "libraryName": "mint-ui",
  4. "style": true
  5. }
  6. ]]]
  • main.js 中引入:
  1. // 按需导入 Mint-UI 中的组件
  2. import { Header } from 'mint-ui'
  3. Vue.component(Header.name, Header)
  • 调用:
  1. <mt-header fixed title="固定在顶部"></mt-header>

组件中的图片要用require

  1. data () {
  2. return {
  3. selected:'',
  4. img1:require('../assets/images/icon/shouye1.png'),
  5. // img2:require('../assets/images/icon/wode.png')
  6. img2:'../assets/images/icon/wode.png'
  7. };
  8. },

Vue中实现路由跳转的四种方式

1.this. $router.push(‘url’)

跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面
push 后面可以是对象,也可以是字符串:

  1. // 字符串
  2. this.$router.push('/home/first')
  3. // 对象
  4. this.$router.push({ path: '/home/first' })
  5. // 命名的路由
  6. this.$router.push({ name: 'home', params: { userId: wise }})

浏览器在解析时,将它解析成一个类似于a标签。

  1. <li >
  2. <router-link to="/home/first">点击验证动画效果 </router-link>
  3. </li>

3.this. $router.replace(‘url’)

跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
replace后面可以是对象,也可以是字符串:

  1. // 字符串
  2. this.$router.replace('/home/first')
  3. // 对象
  4. this.$router.replace({ path: '/home/first' })
  5. // 命名的路由
  6. this.$router.replace({ name: 'home', params: { userId: wise }})

4.this. $router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面

  1. this. $router.go(1) //前进一步 相当于history.forward()
  2. this. $router.go(-1) //后退一步 相当于history.back()
  3. this. $router.go(10)

推荐阅读