vue路由总结

Posted 2022-09-04 huihuihero

基本用法及模板

【首先，安装路由的包】：npm install vue-router --save

【main.js】页面

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'  /* 1、引入路由 */

/* 4、引入需要路由跳转的相关组件页面 */
import Mans from './components/Mans.vue'   
import Users from './components/Users.vue'

Vue.config.productionTip = false 
Vue.use(VueRouter)   /*2、声明路由的使用 */

const router=new VueRouter(   /*5、配置路由，包括路径设置，组件设置 */
  routes:[
    path:"/",component:Users, 
    path:"/mans",component:Mans,
  ],
  mode:"history"   /* 此行代码可以去除路径中的# */
)

new Vue(
  el: '#app',
  router,   /* 3、在实例化对象里面注册router */
  components:  App ,   /* 注意这里是根组件所在处 */
  template: '<App/>'   /* 6、前往根组件处(这里根组件是App.vue)设置路由跳转 */
)


【App.vue】页面
<template>
  <div id="app">
    <!-- 使用router-link添加点击跳转功能 --> 
    <p><router-link to="/">跳转到Users页面</router-link></p>
    <p><router-link to="/mans">跳转到Mans页面</router-link></p>

    <!-- 6、根组件中使用router-view调用路由,类似于react路由的this.props.children -->
      <router-view></router-view> 
    
  </div>
</template>

<script>
  export default 
    name: 'App',
    data()
      return 
        
      
    ,
    methods:
      
    
  
</script>

<style></style>