欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue路由配置

程序员文章站 2024-02-13 19:42:04
...

vue路由配置

路由链接

1、安装

npm install vue-router --save

2、在main.js里引入并Vue.use(VueRouter)

import VueRouter From 'vue-router'
Vue.use(VueRouter)

3、配置路由

​ ①创建组建引入组建

import Home from './components/Home.vue'

​ ②定义路由

const routes = [
    { path: '*', redirect: '/home' }, // 重定向,没有path时默认指向home组建
    { path: '/home', component: Home },
    { path: '/bar', component: Bar}
]

​ ③实例化VueRouter

const router = new VueRouter({
    routes // (编写) 相当于 routes: routes
})

​ ④挂载

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

​ ⑤根组件的模板里放上

<router-view></router-view>

​ ⑥根据按钮跳转时

<router-link to="/home">首页</router-link>

***注意动态路由传值

(一)

1、配置动态路由

const routes = [
    /*动态路径参数以冒号开头*/
    { path: '/home/:id', component: Home },
]
/*跳转时拼接路由*/
<router-link :to="'/home/'+key">首页</router-link>

2、在对应界面获取动态路由的值

this.$route.params

(二)

get方法获取动态路由的值

<router-link :to="'/home?id='+key">首页</router-link>

在对应界面获取动态路由的值

this.$route.query

另外的路由跳转方式

编程式导航路由跳转(通过javaSript直接跳转)

this.$router.push({ path: 'home'})
this.$router.push({ path: 'home/id'}) /*动态跳转*/

命名式导航路由

const routes = [
    { path: '/home', component: Home, name:'home' },
]
this.$router.push({ name: 'home'})
this.$router.push({ name: 'home', params: { id:123}}) /*动态跳转*/
相关标签: vue路由配置

上一篇: android10 uri转file

下一篇: Nuxt.js路由