vue学习的第一天——vue-router的相关使用

一、vue-router的使用

　　1、通过vue-cli初始化时勾选安装或者直接通过npm安装。

　　2、在router.js里面import,并通过vue.use使用.然后再export defualt 暴露一个router实例。

//引入vue主依赖
import Vue from 'vue'
//引入vue-router
import Router from 'vue-router'
//引入组件
import Content from './views/user.vue'
//通过use方法使用vue
Vue.use(Router)

//export default 暴露一个new的router实例
export default new Router({
  //开启history路由模式
  mode: 'history',
  base: process.env.BASE_URL,
  //路由配置
  routes: [
    {
      path: '/',
      name: 'user',
      component: Content
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

　　3、在mian.js里面引入router.js

//引入vue主模块
import Vue from 'vue'
//引入app根组件以便挂载实例
import App from './App.vue'
引入router.js
import router from './router'
引入store.js
import store from './store'
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、路由配置及跳转

1、通过router-link标签的to属性跳转

　　<router-link to="/">登录</router-link>

　　<router-link to="/about">注册</router-link>

2、通过在data中定义动态路由，并将to作为属性动态绑定

　　<router-link :to="">登录</router-link>

3、通过组件中给一个name属性，然后通过to属性绑定name属性

　　<router-link :to="{name:'componentsName'}">登录</router-link>

4、通过js方法跳转。

　　* this.$router.go()方法

　　* this.$router.replace('/login')

　　* this.$router.repalce({name:'login'})

　　* this.$router.push('/login')或者 this.$router.push({name:'login'})

三、组件的嵌套

　　1、每个组件都会通过export default 暴露一个组件的name属性。

　　2、在父组件中通过import XXX from 'XXX'

　　3、在components里注册子组件

　　4、当做标签使用

<script>
import top from "./views/header";
import bottom from "./views/footer";
export default {
  data(){
    return{
      
    }
  },
  name:"app-app",
  components:{
    "top":top,
    "bottom":bottom
  }
}
</script>

vue学习的第一天——vue-router的相关使用

猜你喜欢