vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记

最新推荐文章于 2022-04-12 23:20:35 发布

weixin_30715523

最新推荐文章于 2022-04-12 23:20:35 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MrZouJian/p/6560898.html

本文介绍如何在Vue2.0中配置路由路径，并使用导航式编程实现页面跳转。文章详细解释了如何通过修改webpack配置来简化路径引用，同时展示了如何设置路由重定向以及在路由变化时更新页面标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ps: 基于Vue2.0 npm的vue-cli脚手架

在vue-router中路由路径的简写代码：

点击打开项目 > build > webpack.base.conf.js 找到webpack.base.conf.js文件修改即可
值得注意的是，修改了alias下的引用路径后，要重启项目(npm run dev)，否则将会报错

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
    }
  },

下面代码中即用到简写的路由路径：components

ps: 值得注意的是1.0中路由默认展现第一个组件的go('/goods')方法，在2.0中不行，可用 导航式编程 router.push('/goods')
或者---在路由配置项中进行设置，用 重定向 的方法
如下 routes 设置项--> {path: '/', redirect: goods},即默认进来 '/' 未加路由地址时，显示 goods 这个组件

导航式编程方法：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
const routes = [
  {path: '/', redirect: goods, name:"商品"},
  {path: '/goods', component: goods, name: "商品"},
  {path: '/ratings', component: ratings, name: "评论"},
  {path: '/seller', component: seller, name: "商家"}
]
export default new VueRouter({
  routes: routes
})

重定向方法：　　

import Vue from 'vue';
import router from './router';
import App from './App';
router.afterEach((to, from, next) => {
  document.title = to.name;
})
router.push('/goods')
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
});

基于vue-router路由切换时，动态显示组件或页面模块的标题方法：

const routes = [
  {path: '/', redirect: goods, name:"商品"},
  {path: '/goods', component: goods, name: "商品"},
  {path: '/ratings', component: ratings, name: "评论"},
  {path: '/seller', component: seller, name: "商家"}
]
ps: 其中name值，就是上面代码中路由配置的组件的 name 值

router.afterEach((to, from, next) => {
  document.title = to.name;
})

参考地址 https://juejin.im/entry/585377cf8e450a006c53aef1

转载于:https://www.cnblogs.com/MrZouJian/p/6560898.html