Vue-router 路由

基本加载

1. 安装

npm install --save vue-router

2. 引用

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

3. 配置路由文件，并在 vue 实例中引入

import Index from './Page/Index/template.vue'
import Login from './Page/Login/template'
var router = new router({
  routes: [
  {
	path: '/',    // 要跳转路径
	component: Index  // 要跳转的组件
  },
  {
	path: '/login',
	component: Login
  }
  ]
})
new Vue({
  el: '#app',
  router,
  components: {APP},
  template: '<App/>'
})

4. 确定视图加载位置

<router-view/>

其中的 <router-view/> 对应的是 routers 中不同的路由(模块)页面，切换到不同的路由，就把当前的路由页面 vue 结构替换 App.vue 中的 <router-view/>。

路由跳转

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

路由参数的传递

1. 必须在路由内加入路由 name
2. 在 path 后面加上 /: + 传递参数
3. 传递参数和接收参数看下面的 demo

<router-link 
:to="{name: routername, params: {msg: 我是路由传递过来的参数}}">点我跳转到 routername
</router-link>

传递参数的方式：/path/params
读取参数的方式：$route.params.xxx

<router-link 
:to="{path: '/path', query: {msg: 我是路由传递过来的参数}}">点我跳转到 /path
</router-link>

传递参数的方式：/path?msg="我是路由传递过来的参数"

函数模式：你可以创建一个函数返回 props，这样可以将参数转换成另一种类型，将静态值与基于路由的值相结合等等

const router = new VueRouter({
  routes: [
	{path: '/path', component: compname, props: (route) => { query: route.query.q }}
  ]
})