Shulou(Shulou.com)06/02 Report--

This article is about a sample analysis of routing and routing configuration in Vue3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Basic configuration of routin

1. Install the plug-in

Npm install vue-router@next-save

2. Create a routers.ts file

3. Introduce components and configure paths in routers.ts.

Import {createRouter,createWebHashHistory} from 'vue-router';// import component import Home from'. / components/Home.vue';import News from'. / components/News.vue';import User from'. / components/User.vue';const router = createRouter ({history: createWebHashHistory (), routes: [{path:'/', component: Home}, {path:'/ news', component: News}, {path:'/ user', component: User},]}) export default router

4. Mount the routing file to vue in main.ts.

Import {createApp} from 'vue'import App from'. / App.vue'import routers from'. / routers';// createApp (App) .mount ('# app') const app = createApp (App); app.use (routers); app.mount ('# app')

5. The components in use are routed through the router-view component or router-link

Home page news users

After mounting the router-link, you only need to enter the specified route on the page path corresponding to the component to complete the jump, while router-link implements the a tag for jump routing.

Configuration of dynamic routin

In routes.ts, route is configured in the following way, and dynamic routing is configured by /: aid.

/ / configure routing const router = createRouter ({history: createWebHashHistory (), routes: [{path:'/', component: Home, alias:'/ home'}, {path:'/ news', component: News}, {path:'/ user', component: User}, {path:'/ newscontent/:aid', component: NewsContent},],})

When you jump through router-link, you need a template string and a colon + to.

{{item}}

Get the value passed by dynamic routing through this.$route.params.

Mounted () {/ / this.$route.params gets the value console.log (this.$route.params)} of the dynamic route

If we want to implement a value similar to GET, we can do this in the following way

1. Configure the route as a normal route.

Const router = createRouter ({history: createWebHashHistory (), routes: [{path:'/', component: Home, alias: / home'}, {path:'/ news', component: News}, {path:'/ user', component: User}, {path:'/ newscontent', component: NewsContent},],})

2. Router-link jumps in the form of question marks.

{{item}}

3. Get the get value through this.$route.query.

Console.log (this.$route.query); routing programmatic navigation (JS hop routing)

You only need to specify it through this.$router.push.

This.$router.push ({path:'/ home'})

If you want to implement get passing values, you can do so in the following ways.

This.$router.push ({path:'/ home', query: {aid: 14}})}

Dynamic routing needs to be done in this way.

This.$router.push ({path:'/ home/123', / / query: {aid: 14}}) route pattern Hash pattern

A typical feature of Hash mode is that the page route contains a pound sign.

Const router = createRouter ({history: createWebHashHistory (), routes: [...,],}) HTML5 history mode

Introduce createWebHistory.

The history property in the configuration item of router is set to createWebHistory ().

Import {createRouter, createWebHistory} from 'vue-router'// configure routing const router = createRouter ({history: createWebHistory (), routes: [...],})

Note: when HTML5 History mode is enabled, pseudo-static is required for publishing to the server.

The pseudo-static method is configured:

Https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

Named routing general situation

Configure the name attribute when defining a route

{path:'/ news', component: News,name: "news"}

Pass in an object to jump

The way news transmits value through GET

Configure the name attribute when defining a route

{path:'/ newscontent', component: NewsContent, name: "content"}

Pass in objects including query

{{item}} through dynamic routing

Define dynamic routes and specify name properties

{path:'/ userinfo/:id', name: "userinfo", component: UserInfo}

Pass in objects including params

Jump to user details programmatic routing

It's very similar to the way above.

Click to jump route redirection {path:'', redirect: "/ home"}, / / route redirection {path:'/ home', component: Home}, route alias

In the following example, the route to access people is the same as the route to access alias.

{path:'/ user', component: User, alias:'/ people'}

Alias can also be an array.

{path:'/ user', component: User, alias: ['/ people','/u']}

The form of dynamic routing.

{path:'/ userinfo/:id', name: "userinfo", component: UserInfo, alias:'/ uUnip userinfo'} nested routes

The application scenario of nested routing is usually on the navigation bar.

Define nested rout

{path:'/ user', component: User, children: [{path:', redirect: "/ user/userlist"}, {path: 'userlist', component: UserList}, {path:' useradd', component: UserAdd}]}

Router-link and router-view display content together

Add users to the list of users. Thank you for reading! This is the end of the article on "example Analysis of routing and routing configuration in Vue3". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.