VUE_vue中如何使用路由

今天药忘吃喽~ 2023-02-27 05:45 146阅读 0赞

1.npm安装vuex

> npm install vue-router --save-dev

2.文件

> 在项目根目录 router/index.js

3.配置路由 文件store/index.js

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
      const routes = [
      { 
      	path: '/login',
        name: 'login',
        component: () => import( '../views/login/index')
      },
      { 
        path: '/home',
        name: 'home',
    	redirect: '/index',  //重定向
    	meta:{ 
    		title:'首页'
    	},
        component: () => import( '../layout/index'),
    	children:[  //子路由
    		{ 
    			path: '/index',   //首页
    			name: 'index',
    			component: () => import( '../views/home/index')
    		}
    	]
      }
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

4.将router挂载到当前项目的Vue实例当中去

import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,  //挂载到这个vue实例中
      render: h => h(App)
    }).$mount('#app')

页面中跳转路由

<router-link to="/home">Home</router-link>

跳转后显示路由

<router-view></router-view>

js中使用

fn1() { 
    // 通过路由名称跳转，配置params参数。
      this.$router.replace({  name: 'index', params: {  id: Math.random() } });
    },
    fn2() { 
      // 直接跳转路由地址，参数直接带在路径中。
      this.$router.push(`/home/${ Math.random()}`);
    },
    fn3() { 
      // 通过路由地址进行跳转，配置query参数。
      this.$router.push({  path: '/home', query: {  userId: 321 } });
    },
    fn4() { 
      console.log(this.$router)
      this.$router.go(1)
    },
    fn5() { 
      this.$router.forward()
    },
    fn6() { 
      this.$router.go(-1)
    },
    fn7() { 
      this.$router.back()
    }

路由监听

watch: { 
      // 监听路由跳转。
      $route(newRoute, oldRoute) { 
        console.log('watch', newRoute, oldRoute)
      },
    },