Vue 路由

Vue路由

1.安装
　　npm install vue-router --save / cnpm install vue-router --save
2.main.js中引入并Vue.use(VueRouter)
　　import VueRouter from 'vue-router'
　　Vue.use( VueRouter)
3.配置路由
　　1.创建组件引入组件
　　2.定义路由
　　　　const routes = [{ path : '/foo' , component : Foo} , { path : '/bar' , component : Bar}]
　　3.实例化VueRouter
　　　　const router = new VueRouter({ routes })
4.挂载
　　new Vue({ el:'#app', router , render : h=>h(App) })
5.<router-view></router-view>放在 App.vue
6.<router-link to="/foo">首页</router-link>按钮跳转
7.默认跳转路由
　　const routes = [{ path : '/foo' , component : Foo} , { path : '/bar' , component : Bar} , { path : '*' , redirect : '/bar'}]

示例代码：

import Vue from 'vue'
import App from './App.vue'
import Home from './components/Home.vue'
import News from './components/News.vue'

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

const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '*', redirect: 'home' }
];

const router = new VueRouter({
  routes
})

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

<template>
<div id="Home">
    我是Home
</div>
</template>

<template>
<div id="News">
    我是News
</div>
</template>

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">

</style>

猜你喜欢