After building a VUE3.0 project foundation from scratch (I), the next step is to develop on a single page, routing the page through vue-Router.

The first step:

Start by creating a JS that manages all the routes

import { createRouter, createWebHistory } from 'vue-router'


export const constantRoutes = [
  {
    path: '/'.// Redirect to the home screen
    redirect: "/home"
  },
  {
    path: '/home'.component: () = > import('@/views/home.vue'),
    meta: {
      title: 'home'}}, {path: '/login'.// If you write: component: () => import('@/views/login') automatically matches the index.vue in the login folder
    component: () = > import('@/views/login/index.vue'),
    meta: {
      title: 'Login screen'}}]const router = createRouter({
  // The route is in history mode
  history: createWebHistory(),
  routes: constantRoutes,
})

export default router
Copy the code

The second step:

Create a route interceptor that requires the token interface

/ * * *@author hjljy   hjljy@outlook.com
 * @description Route guard, permission blocking */
import router from '@/router'

router.beforeEach(async (to, from, next) => {
  // Obtain the token cached locally by the browser
  const hasToken = localStorage.getItem("TOKEN");
  const routesWhiteList = [
    '/login'.'/test'
  ]
  // If there is a token, the gateway is allowed
  if (hasToken) {
    //TODO determines whether there is any other required information such as the id of the logged-in user and the role
    next()
  } else {
    // Check whether it is a whitelist path
    if(routesWhiteList.indexOf(to.path) ! = = -1) {
      next()
    } else {
      next({ path: '/login'.replace: true })
    }
  }
})
router.afterEach((to) = > {
  document.title = to.meta.title
})
Copy the code

Step 3:

Finally, introduce the following in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

// Import route interception
import '@/router/permission'

const app = createApp(App);
// Turn off the prompt given in production mode to improve
app.config.productionTip = false
app.use(Antd).use(router)
app.mount('#app')
Copy the code

The final complete project is as follows:

Knowledge point description

Record the knowledge points learned in the construction of learning

Import introduces components, name omission, and other related issues

1 import Does not need to write relative paths when importing dependent libraries, for example: import Antd from ‘ant-design-vue’ The dependency is ant-design-vue

Import: import ‘@/router/permission’

The @ symbol can be defined by itself (in the configureWebpack of vue.config.js, or in webpack.base.config.js), which is the SRC directory. See article: Webpack configuring aliases

3 import introduces the problem of omitted component names, for example: import ‘@/router/permission’ where the suffix is omitted, the complete import should be ‘@/router/permission.js’. Source of import from in Vue: omitting suffix and loading folder

Front-end routing mode

There are two main modes of front-end routing: hash mode and History mode are browser-dependent, not language-specific.

Hash mode: http://127.0.0.1:8080/#home #home is the hash address, by listening for changes in the home to call JS, processing events.

The history mode: http://127.0.0.1:8080/home very traditional routing address.

See article: Detail the hash and history modes of front-end routing