vue project, I have an order (order) list page, the corresponding path is: test/order/all,
and an order details page, corresponding path: test/order/detail?id=123456
want to dynamically route matching according to the order id, because there are strings (question mark, equal sign, order number) in the path, how should I write my Path?
{
path:"/order/detail?id=:id",
component:OrderDetail,
},
Path vue-router dynamic routes are matched by / path/:id .
// 1
{
path:'/order/detail/:id',
component:OrderDetail
}
OrderDetailthis.$route.params.id
// 2
`path` '?q={id}' : /order/detail/id?q=123
this.$route.query.idid
advanced points, you can also use props:true to decouple.
ide/essentials/dynamic-matching.html" rel=" nofollow noreferrer "> official website documentation
1. Dynamic routing means
{
path:'/order/detail:id',
component:OrderDetail,},
`this.router.push({path:'/order/detail/132465'})`
URL /order/detail (`this.$route.params.id` )
2. Your requirement is to pass parameters to url
:
`this.router.push({path:'/order/detail',query{id:132}})`
this.$route.query.id
Previous: Realization of vue Timeline function
Next: Ask for help: [Laravel] questions about one-to-many associative queries in Eloquent
first contact with vue,vue-router < router-view > render blank < router-view > without any error prompt. Here is the code: App.vue <template> <div id="app"> <router-view>< router-view> < div> < tem...
vue routing cannot be monitored other routes can be monitored, but this is not allowed Tools_list.vue: addFriend.vue: ...
for example, how do I initialize this component when I click to bill successfully? Just go back to where you just came in? there are a lot of things here. I don t want to find the corresponding binding value and empty it. I thought of this way to ...
as shown in the figure: the landing page needs to be displayed separately, and now it is all in the middle of the beginning and the end = router.js import Vue from vue import Router from vue-router import Index from .. components index...
because the project routes are all dynamically infected by the back end, the local route storage is not done, addRoute is dynamically mounted, and then lazy loading is used. how should I configure so that lazy loading is not used in the developme...
the current route, such as search , I want to jump to search?p=1 . The first thought on the home page is to read this.$route.query , and then modify p to achieve the jump, but the following push methods in my project do not jump to the url I...
! [picture upload.] normally, the jump page should refresh the page, but why is the page jump between vue not refreshed? is there any way to refresh it, except for methods such as window.locaton ...
above app.js router.js index.vue menu.vue http: localhost:8080 -sharp index http: localhost:8080 -sharp menu Click the jump button, the route has jumped normally, but the page has not changed. Please give me some advice ...
vuex: import axios from axios ; import ip, {token} from . ip ; import store from @ store ; console.log(store); storeundefined import Store from @ utils store ; cookie axios.defaults.withCredentials = false; axios .interceptor...
item.url is the link returned by the background. It turns out that there is an extra " en " to get rid of this. The background does not have this " en " when the foreground is configured with routing, how can it be removed? ...
now there is such a page jump order a-> b-> c , so I can go back to the a page directly $router.go (- 2) on the c page. if there are several page jumps in the middle, such as a-> e-> f-> c , then I need $router.go (- 3) to return to the a pa...
< H2 > how does vue-router invoke a component in the navigation guard? < H2 > login blocking on the official website is to jump to a fixed page, such as router.beforeEach((to, from, next) => { if (to.matched.some(res => res.meta.requireA...
nested routes used ...
A large recruitment system, involving many functions (including APP+ Mini Program + Wap+PC); is thinking of using one interface to provide data to multiple terminals. Mobile APP+wap+ Mini Program UI is basically the same (vue-cli can handle the interf...
1. When vue-router does nested routing, you can already receive the value when you jump to the product page, but I want to jump to the default ProA. After redirect redirection, I can jump to the ProA page, but product can t get the value passed, for ex...
vue-router,A page jumps to page B. Did not jump completely, is to append the content of the B page to the A page, what is the reason? A page <template> <div class="profile_page"> <header-top > <sec...
in order to avoid ugly URL, using history mode when using vue-router, the express, used at the back end is then configured with the following const history = require ( connect-history-api-fallback ); according to the official website. app.use (hist...
I want to use vue-router s navigation guard to define a global guard to listen for changes in routing to implement a function that intercepts entry to the page, and then jumps to the login page but what I write is always wrong. I can t find a solut...
vue-router s route patterns hash and history, have their own disadvantages. but the route for history is http: a.com c d, , not http: a.com?c=d. how to do this or is there any plug-in that can do this? ...
my index.js code import Vue from vue ; import App from . App.vue ; import VueRouter from vue-router ; import routers from . routers ; Vue.use(VueRouter); const router = new VueRouter({ routers }); let div = document.createElement( div ...