vue-router3基本使用

vuex基本使用

vue2 对应的 vuex、vue-router 都为3.

项目创建与框架安装如下

vue create hellorouter3

npm install vue-router@3

npm i vuex@3

npm install

npm run serve

处理新建About组件报错

根路径下创建.eslintrc.js文件，其内容如下：

module.exports = {
    'parser': '@babel/eslint-parser',  //支持ES6语法
    rules: {
        "*": "off"
    },
};

/vue.config.js 添加 lintOnSave:false

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
})

vue-router基本使用

1. 新建About组件其路径为：src/pages/About.vue

<template>
  <div></div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>

2. 将HelloWorld.vue 移动到 src/pages 路径下

3. 注册vuerouter框架并进行路由的集中配置管理

   新建 src/router/index.js ，其内容如下：

import Vue from 'vue'
import VueRouter from "vue-router"
import HelloWorld from "@/pages/HelloWorld";
import About from "@/pages/About";

Vue.use(VueRouter)
const routes = [
    {
        path: "/",
        component: HelloWorld
    },
    {
        path: '/about',
        component: About
    }
]
const router = new VueRouter({
    routes,
    mode: 'hash'
})
export default router;

4. 修改main.js 注册路由，将路由与当前vue实例进行绑定

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import router from './router'

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

5. App.vue 添加路由跳转连接和组件容器

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    |
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>

动态路由

更近一步，可以进行路由传参

params传递数据

1. 修改router/index.js文件， About组件声明通过路径id进行动态传递数据; About组件通过props参数接收数据。

import Vue from 'vue'
import VueRouter from "vue-router"
import HelloWorld from "@/pages/HelloWorld";
import About from "@/pages/About";

Vue.use(VueRouter)
const routes = [
    {
        path: "/",
        component: HelloWorld
    },
    {
        path: '/about/:id', //声明允许通过路径拼接的方式，传递id eg. to="/about/123"
        component: About,
        props: true,  //允许About组件通过声明props的方式接收数据,否则需要使用this.$route.params.id进行id属性的接收
        name: 'about'
    }
]
const router = new VueRouter({
    routes,
    mode: 'hash',
    base: '/'// 当你将应用部署到一个子目录时，需要设置 base 参数以确保路由链接和资源路径正确解析。
})
export default router;

2. 调整About组件，接收并展示id

<template>
  <div>{{ id }}</div>
</template>

<script>
export default {
  name: "About",
  props: ['id'],
}
</script>

<style scoped>

</style>

3. 调整调用处App.vue 传递id

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    |
    <router-link :to="{name: 'about', params: {id: 456}}">About</router-link>
    |
    <router-link to="/about/123">About</router-link>
    <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <router-view/>
  </div>
</template>

编程传递数据

通过js代码，进行动态数据传递

1. 调整App.vue 调用this.$router.push进行页面跳转

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    |
    <router-link :to="{name: 'about', params: {id: 456,name:'gggg'}}">About</router-link>
    ||
    <button @click="showAbout2">About</button>
    <router-view/>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  methods: {
    showAbout2() {
      this.$router.push({name: 'about2', query: {id: 122222, name: 'goood'}})
    }
  }
}
</script>

2. 修改router/index.js， 定义About2组件路由配置

import Vue from 'vue'
import VueRouter from "vue-router"
import HelloWorld from "@/pages/HelloWorld";
import About from "@/pages/About";
import About2 from "@/pages/About2";

Vue.use(VueRouter)
const routes = [
    {
        path: "/",
        component: HelloWorld
    },
    {
        path: '/about',
        component: About,
        // props: true,
        name: 'about'
    },
    {
        path: '/about2',
        component: About2,
        // props: true,
        name: 'about2'
    }
]
const router = new VueRouter({
    routes,
    mode: 'hash',
    base: '/'// 当你将应用部署到一个子目录时，需要设置 base 参数以确保路由链接和资源路径正确解析。
})
export default router;

3. 通过this.$route接收参数

<template>
  <div>{{ id }} --- {{ name }}</div>
</template>

<script>
export default {
  name: "About2",
  data() {
    return {
      id: this.$route.query.id,
      name: this.$route.query.name
    }
  }
}
</script>

<style scoped>

</style>

路由拦截

全局范围添加路由拦截

1. router/index.js 添加路由拦截

router.beforeEach((to, from, next) => {
    console.error('to:' + to.fullPath)  //"fullPath":"/"
    console.error('from:' + from.fullPath) //"fullPath":"/"
    if (to.meta.requireAuth) {
        //模拟权限验证（需要手动向浏览器localstorage添加数据）
        if (localStorage.getItem('token')) {
            next()
        } else {
            next({path: '/'})
        }
    } else {
        next()
    }
})

2. 路由配置添加需要验证flag(meta.requireAuth)

    {
        path: '/about',
        component: About,
        // props: true,
        name: 'about',
        meta: {
            requireAuth: true  //
        }
    },

组件范围内添加

<template>
  <div>{{ id }} --- {{ name }}</div>
</template>

<script>
export default {
  name: "About",
  // props: ['id', 'name'],
  data() {
    return {
      id: this.$route.params.id,
      name: this.$route.params.name
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在进入路由之前调用
    // console.log('Before Route Enter', to, from);
    if (localStorage.getItem('token')) {
      next();
    } else {
      next('/')
    }
  },
  watch: {}
}
</script>

<style scoped>

</style>

嵌套路由.

这个东西多用于再次分类的页面

参考地址

其实现方式与一级路由基本一致

1. 定义简单组件

<template>
  <div>{{ id }}</div>
</template>

<script>
export default {
  name: "AboutId",
  props: ['id'],
}
</script>

<style scoped>

</style>

同理创建AboutName组件
2. router/index.js 进行组件注册，这里要放入children下

    {
        path: '/about',
        component: About,
        // props: true,
        name: 'about',
        children: [
            {
                path: '/id',
                component: AboutId,
                name: 'aboutId',
                props: true,
            },
            {
                path: '/name',
                component: AboutName,
                name: 'aboutName',
                props: true,
            }
        ]
    },

3. About组件内部放入路由容器和路由跳转关系

<template>
  <div>

    <button @click="toID">toID</button>
    |
    <button @click="toName">toName</button>
    <router-view/>
  </div>

</template>

<script>
export default {
  name: "About",
  // props: ['id', 'name'],
  data() {
    return {
      id: this.$route.params.id,
      name: this.$route.params.name
    }
  },
  methods: {
    toID() {
      this.$router.push({name: 'aboutId', params: {id: 333333}})
    },
    toName() {
      this.$router.push({name: 'aboutName', params: {name: 'good'}})
    }
  },

  watch: {}
}
</script>

<style scoped>

</style>