vue_4

发布于：2021-12-10 09:35:03  栏目：技术文档

Vue项目mint-ui引入方式

1、完整引入

• 安装mint-ui：

npm intall mint-ui  --save

• main.js 中引入：

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

• 页面调用

<mt-header fixed title="固定在顶部"></mt-header>

2、按需引入

• 安装mint-ui：

npm intall mint-ui  --save

• 安装 babel-plugin-component：

npm install babel-plugin-component -D

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

• 修改.babelrc：

"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]

• main.js 中引入：

// 按需导入 Mint-UI 中的组件
import { Header } from 'mint-ui'
Vue.component(Header.name, Header)

• 调用：

<mt-header fixed title="固定在顶部"></mt-header>

组件中的图片要用require

        data () {
            return {
                selected:'',
                img1:require('../assets/images/icon/shouye1.png'),
                // img2:require('../assets/images/icon/wode.png')
                img2:'../assets/images/icon/wode.png'
            };
        },

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

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

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

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

2.router-link 【实现跳转最简单的方法】

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

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

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

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

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

4.this. $router.go(n)

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

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

相关推荐