编程知识 cdmana.com

Vuerouter Basics (1)

1. What is routing :

image.png
image.png
About front and back end routing ( Because I didn't do the back end routing , So I found some related content on some blogs ):

1. Front end routing is the routing of a single page , such as www.abc.com/user/:id, Of course, back-end routing can also achieve this . Back end routing is the routing of the whole application , such as www.abc.com/user, www.abc.com/product. And sometimes what you see url Maybe it's related to the back end request url Different .

2. The front-end routing application scenario is the so-called single page application . When the business allows the browser to allow, using the front-end routing can make the page experience better . But it's not applicable in many business scenarios, for example , For example, display ads , There's almost no need to have any other logic on the page , For example, the strict order process , Back end routing can strictly control the front end from entering the page , And back end routing can be applied to API Layers provide interfaces and many other scenarios are available . Flexible selection of front-end and back-end routes will make your business experience quite good , Or at a deeper level, you use isomorphism , The front and back end share a set of routes , When entering the page directly by carriage return, render the output of this set of routes on the server , But when the page clicks and jumps, it is the front-end routing ......

3. Front end routing is just a single page routing , Like the whole website, it's better to give it to the backstage .

2. Use of routes

Parent component :

<template>
  <div id="app">
    <router-link to="/"> home page </router-link>
    <router-link to="/article"> article </router-link>
    <router-link to="/about"> About </router-link>
    <router-view />
  </div>
</template>

Subcomponents :

<template>
  <div class="home">
     home page 
  </div>
</template>

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"

Vue.use(VueRouter)

import Home from "./components/home"
const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/article',
    component: () => import("./components/articles.vue"),
  },
  {
    path: '/about',
    component: () => import("./components/about.vue"),
  }
]
const router = new VueRouter({
  routes,
})

Vue.config.productionTip = false

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

The effect is as follows :
image
If all the configurations are written to main.js in , Ugly and hard to find , therefore :
image.png
index.js:

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../components/home.vue"

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/article',
      component: () => import("../components/articles.vue"),
    },
    {
      path: '/about',
      component: () => import("../components/about.vue")
    },
  ],
})

main.js:

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

Vue.config.productionTip = false

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

history Pattern , effect :
image

3. Something to watch out for

3.1 When configuring routing , There are some components that you don't need to show when you first enter the page , It's best to use asynchronous components .

{
    path: '/about',
    component: () => import("./components/about.vue"),
},

3.2 <router-link> There must be attributes to, This property indicates which path to switch ; This element is rendered as a Elements , Use tag attribute , Such as tag="li" You can modify the rendered result .

<router-link to="/about" tag="li"> About </router-link>

result :
image.png
Although the label has changed , But it's still clickable .
3.3 <router-view />( It can be written as a single label ), This element will render the component to which the route matches at this location , The result of the rendering is a div.
image.png

4. Two modes

image.png

5. summary

vue-router It's very simple to use , The following articles will focus on vue-router Expand . Work together , To write beautiful code !

版权声明
本文为[Coder_ WangYu]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225150639651c.html

Scroll to Top