【vue-router】Vue路由从创建到使用

目录

一、路由从创建到使用

1、在html文件中使用路由

第一步：使用CDN引入vue-router插件

第二步：定义组件

第三步：创建路由对象数组

第四步：创建路由器实例对象

第五步：将路由器对象注入到vue实例中

第六步：使用路由

2、vue-cli中使用路由 

安装vue-cli

创建一个项目

路由的使用

---

一、路由从创建到使用

路由可以看成加载组件的另一种方式，使用路由来实现组件之间的跳转。

vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。

1、在html文件中使用路由

第一步：使用CDN引入vue-router插件

第二步：定义组件

let aticle={
	template:`
		
文章页面
	`
};
let column={
	template:`
		
栏目页面
	`
};

第三步：创建路由对象数组

route路由对象  router路由器对象  routes路由对象数组

let routes=[
    {
      path: '/',
      // 路由重定向  设置刚进入页面时展示哪个页面
      redirect: '/article'
    },
	{
      //路径
	  path:'/article',
      //路由路径跳转的组件
	  component:aticle
      // 路由命名
      name:'Article',
      // 路由别名
      alias:'/aa'
	},
	{
	  path:'/column',
	  component:column
	}
];

第四步：创建路由器实例对象

创建路由器实例对象，将路由对象数组注入到路由器对象

let router = new VueRouter({
	//routes: routes
    //可以简写成：
    routes
});

第五步：将路由器对象注入到vue实例中

new Vue({
	router
});

第六步：使用路由

to表示要去的路由

去文章管理
去栏目管理

需要提供路由出口，匹配路由路径对应的组件

例子：

  
  
  
  
  
  



  

    
    去文章管理
    去栏目管理
    
    
  
  

 

2、vue-cli中使用路由 

安装vue-cli

npm install -g @vue/cli

创建一个项目

vue create 项目名称

1、使用上下键选择最后一项（表示手动选择功能），然后回车：

 

2、 按空格键可以选中或取消选中，我们选择以下两项：

3、选择vue2版本

 

4、路由器是否使用历史模式？输入y或者直接回车即可

 

5、想要把配置项放在哪里？选择In package.json

 6、是否保存为未来项目的预设？直接回车即可

7、等待项目创建。。。

 

8、启动项目

 

路由的使用

路由相关的配置在 src-->router-->index.js，我们可以在components或者views下面写我们的组件，或者也可以自己创建一个文件夹来存放组件。

 

 在vue-cli中的路由使用和在html文件中的使用步骤是一致的：

例子：
在components下创建两个组件：A.vue 和 B.vue

A.vue

B.vue

 然后我们去router下的index.js配置路由：

最后我们在App.vue中使用路由：

 

 

观察地址栏，当我们点击页面跳转时，只有后面的地址发生改变了，而前面的localhost:8080没有变化，这就是单页面应用。