07-Vue_路由

一. 路由的基本使用

1.1.1 路由的定义

// 创建路由对象
var routerObj = new VueRouter({
     
	// 路由规则匹配
	routes: [
		{
     path: '/', redirect: '/login'},
		{
     path: '/login', component: login},
		{
     path: '/register', component: register}
	]
});

• path：路由的URL地址
• component：组件对象
• redirect(可选)：前端的重定向

1.1.2 注册路由

• 要想启用路由，那么要先在实例中注册一下路由才行。

  var vm = new Vue({
         
  	el: '#app',
  	router: routerObj
  });
  

• router：指定一个路由对象

1.1.3 使用路由

<div id="app">
    <router-view>router-view>
div>

二、 设置 active 样式

• 在创建路由对象的时候，可以添加linkActiveClass属性来实现指定自定义类名，从而实现设置超链接样式的效果

  .myActive {
         
      color: red;
  }
  

  const router = new VueRouter({
         
      routes: [ ... ],
      linkActiveClass: 'myActive'
  })
  

三、 路由参数

3.3.1 query

• 首先我们在路由规则匹配中写

  var routerObj = new VueRouter({
         
  	routes: [
  		{
         path: '/login', component: login},
  	]
  });
  

• 在中编写

  <router-link to="/login?id=10">登录router-link>
  

• 在组件中使用

  var login = Vue.extend({
         
  	template: '
  登录 --- {
         {$route.query.id}}
  ',
  	created() {
         
  		console.log(this.$route.query.id)
  	}
  });
  

3.3.2 params

• 首先在路由规则匹配中编写

  var routerObj = new VueRouter({
         
  	routes: [
  		{
         path: '/register/:id', component: register}
  	]
  });
  

• 在中编写

  <router-link to="/register/100">注册router-link>
  

• 在组件中使用

  var register = Vue.extend({
         
  	template: '
  注册 --- {
         {$route.params.id}}
  ',
  	created() {
         
  		console.log(this.$route.params.id)
  	}
  });
  

3.3.3 props 传递路由参数

• 当 props 为 true 时，表示将路由参数作为 props 数据传递给组件

  var router = new VueRouter({
         
      routes: [
          {
          path: '/', redirect: '/users/1' },
          {
          path: '/users/:id', component: login, props: true }
      ]
  })
  

• login 组件

  var login = Vue.component('login', {
         
      template: '
  Login - {
         { id }}
  ',
      props: ['id']
  })
  

四、 路由嵌套

• 使用children属性来实现子路由

  var routerObj = new VueRouter({
         
  	routes: [
  		{
         
  			path: '/account',
  			component: account,
  			// 实现 /account 的子路由
  			children: [
  				/* 
  					不能加 “ / ” ，不然不会和 /account 拼接，
  					而是直接请求的根目录
  				 */
  				// 此时的URL：/account/login
  				{
         path: 'login', component: login},
  				// 此时的URL：/account/register
  				{
         path: 'register', component: register}
  			]
  		}
  		
  	]
  });
  

• 来看看简单看看GIF效果
  

  带色的边框和蓝色文字说明是后期添加的。

五、 命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

• 我们在路由规则中可以使用components来实现命名。

  • default：不指定名称则默认使用此组件

  // 样式我...忘记了...那个啥...自己脑补哈~
  
  // 组件
  var header = Vue.extend({
         
      template: '
  header
  '
  });
  var left = Vue.extend({
         
      template: '
  left
  '
  });
  var main = Vue.extend({
         
      template: '
  main
  '
  });
  
  // 路由
  var routerObj = new VueRouter({
         
      routes: [
          {
         
              path: '/',
              components: {
         
                  'default': header,
                  'left': left,
                  'main': main
              }
          }
      ]
  });
  

• 最后在中，使用name属性，就可以使用了。

  <div id="app">
  	<router-view>router-view>
  	<div class="container">
  		<router-view name="left">router-view>
  		<router-view name="main">router-view>
  	div>
  div>
  

5.1 报错

Do not use built-in or reserved HTML elements as component id: xxx

• 错误原因：组件名和内置的标签冲突了
• 解决方案：修改组件名不与内置标签冲突