Nuxt.js

路由

Nuxtjs拥有自动增加路由的功能，非常强大

使用

Nuxtjs中用<nuxt-link></nuxt-link>来代替<router-link></router-link>

用<nuxt-child></nuxt-child>来代替<router-view><router-view>

重定向

在nuxt.config.js中设置

1
2
3
4
5
6
7
8


router: {
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/qwq',
        redirect: '/wizz-index'
      })
    }
  },

通过中间件文件

在目录中的middleware添加一个名为：redirect.js的文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


export default function ({
  isHMR,
  app,
  store,
  route,
  params,
  error,
  redirect
}) {
  if (isHMR) return; //用来判断热更新
  // 页面均放在_lang文件夹下，即lang为动态路由参数;
  /* if (!params.lang) { //此写法会出现路由重定向次数过多的问题；
  return redirect('/' + defaultLocale + '' + route.fullPath)} */
  if (route.fullPath == '/film') {
    return redirect('/film/nowplaying')
  }
}

最后需要在nuxt.config.js文件中添加

1

router: {middleware: 'redirect'}

默认路由

1
2
3
4
5
6


expault default {
	created() {
   		this.$router.push("/wizz-index");
	},
}

element-ui配置

安装 element-ui

1

npm i element-ui -S

安装依赖（按需引入才需要，全局不需要）

1
2
3


npm i -D babel-plugin-component
// or
yarn add -D babel-plugin-component

在根目录下的plugins下创建element-ui.js文件

全局引入

1
2
3
4


import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

以下是按需引入例子，自己按实际情况引用

1
2
3
4
5


import Vue from 'vue'
import { Button, Select } from 'element-ui';

Vue.use(Button);
Vue.use(Select);

然后将根目录下的nuxt.config.js文件修改为

修改plugins属性，引入css

1
2
3
4


plugins: [{ src: '@/plugins/element-ui', ssr: true }],
css: [
  'element-ui/lib/theme-chalk/index.css'
],

按需引入还需要在 build 中添加 babel 属性：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


build: {
    vendor: ['element-ui'],
    babel: {
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
          }
        ]
      ],
      comments: true
    },
}

Nuxtjs @ Littlechai | 2021-11-06T16:54:13+08:00 | 2 分钟阅读 | 更新于 2021-11-06T16:54:13+08:00